概要
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のみインポートする。