はじめに

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

インストール

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

npmを使用する場合

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

yarnを使用する場合

yarn add @fortawesome/fontawesome-svg-core

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

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" />

他にも色々な記事を書いているので、よければ読んでいってください、、、
基本設計について
 Vue.jsとNode.jsでチャットアプリを作った
 Next.js×TypeScriptでTODOアプリを作成する