Zenn
🫧

Next.jsでFontAwesome使ってみた

2024/03/07に公開
Next.js
React
Font Awesome
tech

はじめに

  1. 参照：FontAwesomeの公式ページ
  2. 今回はこのchevron-rightを表示させてみる

FontAwesomeをインストール

基本は下記の3つをインストールでOK

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

さらに、Next.jsで使う場合はcss設定の必要があるそう。(以下公式)

Next.js はほとんどの Web プロジェクトとは異なる方法で CSS を管理するため、単純なバニラのドキュメントに従ってreact-fontawesomeプロジェクトに統合すると、巨大なアイコンが表示されます。これは、アイコンを動作させるための付属の CSS が欠落しているためです。

ということなのでimport等しておく

pages/_app.js
import { config } from '@fortawesome/fontawesome-svg-core' //追加
import '@fortawesome/fontawesome-svg-core/styles.css' //追加
config.autoAddCss = false //追加

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

config.autoAddCss は fontawsom-svg-core ライブラリがアイコン用の css を自動で <head /> に追加するかを制御するフラグ。

FontAwesomeはデフォルトで動的にスタイルを追加しますが、Next.jは各ページに個別のCSSを持つためこれは意味がありません。

そこでconfig.autoAddCss=falseとすることで不要なスタイルの追加を防ぐようです。

FontAwesomeを使用

chevron-rightなのでfaChevronRightに変換してiconに指定。
colorをつけたり、回転させることができます

import { faChevronRight } from "@fortawesome/free-solid-svg-icons"
<FontAwesomeIcon icon={ faFaceRelieved }　rotation={90} color="green"/>

できた

無事表示できました。

個人的にcolorを変数で指定はどうするんだろう、、と調べたら下記の書き方でできました

<FontAwesomeIcon icon={faChevronRight} style={{color: 'var(--c-text2)'}}/>

Discussion