Gatsby内でアイコンを扱う

#アイコンを扱うためにreact-fontawesomeをインストールする

yarn add @fortawesome/fontawesome-svg-core

yarn add @fortawesome/react-fontawesome

yarn add @fortawesome/free-solid-svg-icons

yarn add @fortawesome/free-regular-svg-icons

yarn add @fortawesome/free-brands-svg-icons

#ファイル内でアイコンを使えるようにする

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
Import {使いたいアイコンをimportする} from "@fortawesome/free-solid-svg-icons"
///
<FontAwesomeIcon icon={使いたいアイコン名} />

#アイコンの拡大表示を防ぐ
アイコンが拡大表示されるのを塞ぐために、CSSファイルよりも先にFontAwesomeのCSSを読み込む

import "@fortawesome/fontawesome-svg-core/style.css" *1
import {config} from "@fortawesome/fontawesome-svg-core" *2
config.autoAddCss = false *2

*1:FontAwesomeのCSSを先読みする設定
*2:FontAwesomeのコンポーネント内でCSSを適用しないようにするための設定 

####参考文献:
Webサイト高速化のための静的サイトジェネレーター活用入門　GatsbyJSで実現する高速＆実用的なサイト構築
FortAwesome/react-fontawesome https://github.com/FortAwesome/react-fontawesome