FontAwesomeのアイコンが一瞬巨大に表示される問題の解決

ページを開いたときに以下のように FontAwesome のアイコンが一瞬デカく表示されてしまう問題に出くわしました 😵

このエントリーでは、この問題を回避する方法を紹介します。

このブログは Gatsby を使って実装されているので、Gatsby の GitHub のページを見に行きます。

すると既に issue が上がっていたので、これを参考にします。

FortAwesome/react-fontawesome - Over sized icons on each page refresh #134

どうやら FontAwesome の CSS の読み込みのタイミングの問題のようで、

ページにスタイルシートを直接埋め込むことで解決するとのこと。🤔（詳しくはこちらの公式ドキュメント）

以下が私が行なった対応です

akhrszk/blog - 🐛 Fix over size FontAwesomeIcon

import * as fontawesome from "@fortawesome/fontawesome-svg-core"

fontawesome.config.autoAddCss = false

return (
  ...
  <style>{fontawesome.dom.css()}</style>
  ...
)

解決しました 🎉