GatsbyでFont Awesomeを使う方法

GatsbyでFont Awesomeを使う方法JavaScript

今回は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を使うのはそこまで難しくありません。

アイコンがあるだけでもサイトの見やすさって結構変わると思うので積極的使っていきたいですね。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
JavaScript
スポンサーリンク
でざなり