はじめに
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" />
最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、
基本設計について
Vue.jsとNode.jsでチャットアプリを作った
Next.js×TypeScriptでTODOアプリを作成する