Skip to content
Htkyama Blog

Gatsby.jsでFont Awesomeを使う

— Gatsby.js — 1 min read

準備

YarnでFont Awesome関連のパッケージをインストール。

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

gatsby-plugin-fontawesome-cssプラグインをインストール。

$ yarn add gatsby-plugin-fontawesome-css

gatsby-plugin-fontawesome-cssプラグインは、Gatsby.jsでビルドするとアイコンの表示が一瞬遅れる問題を解決してくれます。

gatsby-config.jsに以下を追記。

module.exports = {
  plugins: [`gatsby-plugin-fontawesome-css`],
}

使い方

例えば、RSS Feedのアイコンだと以下のように書きます。

1import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
2import { faRss } from '@fortawesome/free-solid-svg-icons'
3
4<FontAwesomeIcon icon={faRss} />

参考

© 2023 All rights reserved.
RSS