Next.jsにFont Awesomeを導入する手順

Next.jsでFont Awesomeを導入する手順になります。

Font Awesomeをインストール

yarnの場合

yarn add @fortawesome/fontawesome-svg-core 
　　　　　@fortawesome/free-solid-svg-icons 
　　　　　@fortawesome/free-brands-svg-icons
　　　　　@fortawesome/react-fontawesome

npmの場合

npm i --save @fortawesome/fontawesome-svg-core
             @fortawesome/free-solid-svg-icons
             @fortawesome/free-brands-svg-icons
             @fortawesome/react-fontawesome

Font Awesomeを使用したいcomponentsで読み込む

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRss } from '@fortawesome/free-solid-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faInstagram } from '@fortawesome/free-brands-svg-icons'

export default () => {
  return (
    <div>
      <FontAwesomeIcon icon={faRss} />
      <FontAwesomeIcon icon={faTwitter} />
      <FontAwesomeIcon icon={faInstagram} />
    </div>
  )
}

上記のように、Font Awesomeを読み込むことでcomponentsで使用可能です。