react-fontawesomeのアイコンが一瞬大きく表示されてしまう問題

執筆日: 2021-08-21

概要

Gatsby.jsにてreact-fontawesomeを使用しているとき、一瞬大きくアイコンが表示されてしまう現象が発生しました。
cssは適応しているのに、一体何が原因なのでしょうか。

原因

読み込みの順番が原因です。

Gatsbyではアイコンが埋め込まれたHTMLが事前生成されます。
よってcssの適応が間に合わないということです。

解決策

gatsby-browser.jsにて以下のように記述します。

import '@fortawesome/fontawesome-svg-core/styles.css'
import { config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false

まず、gatsby-browser.jsはrootへの設定やグローバルに読み込ませたい設定などをすることができます

autoAddCssによるcssロードを無効にし、手動でcssを読み込みます。
htmlが生成される前に事前にcssを読み込むことができれば良いわけです。

Gatsbyに限らず

今回の事例はjavascriptからfontawesomeを使用する時に起きる現象です。
Gatsby.jsのみに関わった問題ではないので、同様の現象が見られた時に対応できるようになれば良いかなと思います。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店