noguzo blog

react-fontawesomeのアイコンが一瞬だけでかく表示されてしまう

2019.12.09


事象

Next.jsでreact-fontawesomeを使うと一瞬だけアイコンが巨大に表示されてしまう

Image from Gyazo

対策

ページがレンダリングされたあとにCSSが適用されているよう。

アイコンのスタイル崩れを防ぐために以下の記述を追加。 (自分のプロジェクトだと、styleのリセットをするためにlayouts/main.jsというものを作っていたのでそちらに追記した。)

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

...

<style jsx global>{`
  @import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
  ${dom.css()}
`}</style>

そして、pages以下のファイルでmain.jsを読み込む。

import Page from '../layouts/main'

const Hoge = () => {
 return (
   <>
     <Page />
     ....
   </>
 )
}

ちなみにフォルダ構造はこんな感じ。

- next-project
  - layouts
    - main.js
  - components
  - pages
    - index.js
  - ...

これで初期表示の巨大アイコンはなくなりました。

参考

reactjs - react font awesome renders big icon until scales down - Stack Overflow Font Awesome


Frontend engineer.