Gatsby FontAwesome 導入と要点

概要

1. Gatsby で作成しているサイトに FontAwesomeIcon を導入
2. デプロイ後に FontAwesomeIcon の表示が大きくなるのを防ぐ

Font Awesome

有料プランもありますが、基本的に無料の範囲内で SNS のアイコンやその他汎用性の高いアイコン等を使用することができます。
https://fontawesome.com/

Gatsby に導入

react-fontawesome をインストールします。

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/react-fontawesome

FontAwesome で使用するアイコンのスタイルをインストールします。

• solid, regular, brands は無料で使用することができます。

$ npm isntall @fortawesome/free-solid-svg-icons

FontAwesomeIcon の使用

• 使用したいファイルにてFontAwesomeIconを import
• 使用したいアイコンを import

pages/index.js

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
// 使用したいアイコンをインポート
import { faUserEdit } from "@fortawesome/free-solid-svg-icons"

通常 fontawesome を使用する際は下記のようにケバブケースで記述しますが、ここで使用する際にはキャメルケースにする必要があります。

<i class="fas fa-user-edit" />

↓

<FontAwesomeIcon icon={faUserEdit} />

ここまでが Gatsby に FontAwesome の導入です。

デプロイ後のアイコン表示

ローカル環境での開発時には全く気づかないですが、本番環境にあげると下記のようにリロードした際や、サイトにアクセスした際に一瞬大きく表示されます。

デプロイ後の表示

こうなる原因は、SVG が表示されてから FontAwesome の CSS が適応される為なのでFontAwesome の CSS を先読みすることで解消できます。

/gatsby-browser.js

import "@fortawesome/fontawesome-svg-core/styles.css"

これでデプロイ後でもアイコンの表示が大きくなることを解消することができました。

参考書籍

https://amzn.to/2UqDR3X

以前上記の書籍で学習しましたが、忘れててハマったのでまとめました。