GatsbyJSでfontawesomeを使う

ブログのUI開発に必要なやつ

ブログのUI開発にアイコンは、ユーザーの学習コストを下げるという意味で無くてはならないモノだと思っていてその実装をGatsbyではどうするか？について調べた。

結論fontawesomeを採用した。

• react-icons
• react-fontawesome
• react-fa
  実装アイコン数はreact-iconsが最も多くGithubのスター数も多い。しかし、個人で作る上で必要なアイコンはそこまで多くない。あとfontawesomeのバージョンが4系だった（最新は5系）ので5系に対応しているreact-fontawesomeを実装していくことにする。

GatsbyJSにインストール

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

これでOK。fortawesomeはスペルミスじゃないので安心して欲しい。
gatsbyのプラグインじゃないのでgatsby-config.jsはの変更不要。

fontawesomeを早速使ってみる

index.jsを修正し動作確認をする。

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

ここの部分でフォントを読み込む。fontawesomeは、直接CDNで読み込んでやるとサイズが大きくGoogleの計測ツールで見るとPageSpeedが著しく下がる。このコンポーネントだと使うフォントだけを抜き出してサブセットを作って書き出してくれる。最高。Layoutに入れ込んでしまえば管理楽になりそう。
あとは、適当な位置にタグを入れて確認しよう。

<FontAwesomeIcon icon={faCoffee} />

GatsbyJSでfontawesomeを上手く表示できた！
これでイケそうだ。