[Next.js] Font Awesomeを導入する方法

概要
インストール
コンポーネントでインポートする場合
_app.jsでグローバルにインポートする場合

概要

Next.jsでFont Awesomeを使うための手順をまとめました。

インストール

コア
npm install @fortawesome/fontawesome-svg-core
Reactコンポーネント
npm install @fortawesome/react-fontawesome

以下のアイコンパッケージは必要な分だけインストール。

Solid
npm install @fortawesome/free-solid-svg-icons
Regular
npm install @fortawesome/free-regular-svg-icons
Brands
npm install @fortawesome/free-brands-svg-icons

コンポーネントでインポートする場合

// インポート
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHouseChimney,faGamepad } from "@fortawesome/free-solid-svg-icons";
// house-chimney⇒faHouseChimneyのように先頭にfaを付けたキャメルケースとなる

// JSX
<FontAwesomeIcon icon={faHouseChimney} />
<FontAwesomeIcon icon={faGamepad} />
// ※サイズと色は親要素のfont-sizeとcolorで指定する

_app.jsでグローバルにインポートする場合

// インポート
import { library } from '@fortawesome/fontawesome-svg-core';
import { faHouseChimney,faGamepad } from "@fortawesome/free-solid-svg-icons";
library.add(faHouseChimney, faGamepad);

/*
※以下のようにすると全てのアイコンをインポートすることができる
import { fas } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fab } from "@fortawesome/free-brands-svg-icons";
library.add(fas, far, fab);
*/

//コンポーネントではFontAwesomeIconのみインポートする。