Next.js(React)でFontAwesome を使用できるようにする。

はじめに

Next.jsでFontAwesomeを使用できるようにしたので、メモとして書いておきます。

インストール

以下のコマンドでインストールする。

1. SVGコアパッケージをインストールする。

npmを使用する場合

npm i --save @fortawesome/fontawesome-svg-core

yarnを使用する場合

yarn add @fortawesome/fontawesome-svg-core

2. アイコンパッケージをインストールする。

npmを使用する場合

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

yarnを使用する場合

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

3. react-fontawesomeパッケージをインストールする。

npmを使用する場合

npm i --save @fortawesome/react-fontawesome@latest

yarnを使用する場合

yarn add @fortawesome/react-fontawesome@latest

使い方

以下のように、FontAwesomeをインポートしてきます。
今回は、時計のアイコンを使用するため、以下のように書いていきます。

インポート文

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

アイコンの使用

そのまま使用すると、かなり大きく表示されてしまうので、CSSで調整する必要があるかもしれないです。

<FontAwesomeIcon icon={faClock} className="h-3 mr-1" />

以上になります。