Next.jsでFont Awesomeを使用

Next.jsでFont Awesomeを使用する方法です。

npm install

以下をnpmインストールします。

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

サンプルソース

以下のように使用します。
「faArrowLeft」部分は適宜アイコン検索で探して記述します。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";

export default function FontAwesome() {
  return (
    <div>
      <FontAwesomeIcon icon={faArrowLeft} />
      アイコン表示
    </div>
  );
}

本番環境でアイコンが表示されない場合

/pages/_app.jsに以下を記述します。

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

参考記事

Set Up with React（Font Awesome）
Find Icons（Font Awesome）
Getting Font Awesome CSS to work（Font Awesome）