Contents
はじめに
どうも，たける@typememo です．
Gatsby.JS の Fontawesome が一瞬大きく表示されるのを防ぐ方法について紹介します．
デプロイした後で初めてこの不具合に気がつきました．
以前 typememo.jp に足を運んでくださった方々にはお見苦しいものを見せてしまい大変申し訳ないです．
もう修正したので，二度と Fontawesome が一瞬大きく表示される奇妙な動作はしませんのでご安心を．
それでは，参りましょう．
参考:
実装内容
対処方法は GatsbyJSで実現する、高速＆実用的なサイト構築 p130 に載っていました．
この本に書かれていたのですが，Fontawesome が一瞬大きく表示されてしまうのは，
SVG が表示されてから Fontawesome の CSS が適用されるため
だそうです．
なので対処方法としては，
Fontawesome の CSS を先読みすれば良い
と書かれていました．
なるほど．
ということで，次の3文を Fontawesome を使っているファイルに追加すれば ok です．
import "@fortawesome/fontawesome-svg-core/styles.css"
import { config } from "@fortawesome/fontawesome-svg-core"
config.autoAddCss = falseこれで Fontawesome が一瞬大きく表示される不具合は解決です．
よっしゃ！
おわりに
Fontawesome が一瞬大きく表示される不具合は， Fontawesome の CSS を先読みすれば解決するぞ， という記事でした．
いかがだったでしょうか？
面白かった，役に立った，と思っていただけたらシェアしていただけると嬉しいです！
余談ですが，この改修方法ってこの著者が独自に考え出したんだろうか？ と疑問に思ったのでちょいと検索してみました．
結果，どうやら著者独自のアイディアでは無さそうです．
react-fontawesome でページ読み込み時に一瞬だけアイコンが大きくなる問題 | monolithic kernel という記事がリンクしている Over sized icons on each page refresh #134 | react-fontawesome というイシューに全く同じ実装方法が書いてありました．
リファレンスとして， GatsbyJSで実現する、高速＆実用的なサイト構築 p130 にこのイシューへのリンクを貼っておいてくれたらよかったのになー， と思いながら筆を置きます．
最後までお読みいただきありがとうございました．
愛用品
- Xiser Pro Trainer (ステッパー)
- HHKB Professional 墨 (キーボード)
- HHKB キートップセット 白 (キートップ)
- Apple Magic Mouse 2 (マウス)
- Apple MacMini (PC)
- iiyama Display 27inch FullHD (ディスプレイ)
- KINTO UNITEA 550ml (コップ)
