今回はGatsbyでFont Awesomeを使ってフォントを表示させる方法を紹介します。
Font Awesomeのパッケージをインストール
以下のコマンドで必要なパッケージをまとめてインストールしましょう。
npm i @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
インストールしたパッケージは
- @fortawesome/fontawesome-svg-core
- @fortawesome/free-brands-svg-icons
- @fortawesome/free-solid-svg-icons
- @fortawesome/react-fontawesome
の4つです。fortawesomeとなっていますが誤字ではないのでそのままでok。
@fortawesome/free-brands-svg-iconsと@fortawesome/free-solid-svg-iconsをインストールすることでbrandsアイコンとsolidアイコンが使えるようになります。
どのアイコンがbrandsでどのアイコンがsolidかはFont Awesomeのアイコンのページまで行けばわかります。
GatsbyでFont Awesomeを使う
使い方は簡単。まずページの先頭でFont Awesomeと使いたいアイコンをインポートします。
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faPencilAlt } from "@fortawesome/free-solid-svg-icons"
Font Awesomeのページでは各アイコンはfa-pencil-altみたいにハイフンで書かれていますが、Gatsbyではキャメルケースで使います。これに限らずjsは大体ハイフンで繋がってる書き方はキャメルケースに書き直して使うことがほとんどですね。
また、使用したいアイコンがbrandsなのかsolidなのかで~~~ from @fortawesome/free-brands-svg-iconsなのか~~~ from @fortawesome/free-solid-svg-iconsなのかが変わるので注意しましょう。僕の場合今回はbrandsのアイコンは使用しないのでインポートしていません。
そうしたらアイコンを表示したいところで以下のように書きます。
<FontAwesomeIcon icon={faPencilAlt} />
これだけでFont Awesomeのアイコンが使えます。簡単ですね。
他の記事ではimport { library } from '@fortawesome/fontawesome-svg-core'とか書いてやっているのもありましたが、僕の試した限りだとlibraryはなくても表示できたので、もしかしたらいらないのかも。
ちなみにCDNで読み込むと結構サイズが大きいので表示速度が落ちる可能性があります。
コンポーネントとして使えば必要なフォントだけをサブセット化して使えるので表示速度が落ちる心配もないですね。
ページ読み込み時にアイコンが一瞬デカくなる現象
普通のリロードでは普通に表示できるけど、キャッシュを削除してリロード（スーパーリロード）すると読み込み時にアイコンが一瞬デカく表示されることがあります。
この現象はFont AwesomeのCSSが動的に読み込まれるタイミングより前にアイコンが描画されてしまうせいで、CSSの適用がそれまでに間に合わないかのが原因みたいです。
解決策としてFont AwesomeのCSSを動的に読み込むのをやめて普通に読み込むようすればokです。
やり方は簡単で、gatsby-config.jsに以下の3行を追加するだけ。
import "@fortawesome/fontawesome-svg-core/styles.css"
import { config } from "@fortawesome/fontawesome-svg-core"
config.autoAddCss = false
こちらの記事が参考になりました。ありがとうございます！
＞＞react-fontawesome でページ読み込み時に一瞬だけアイコンが大きくなる問題
まとめ
GatsbyでFont Awesomeを使うのはそこまで難しくありません。
アイコンがあるだけでもサイトの見やすさって結構変わると思うので積極的使っていきたいですね。
