メインコンテンツへスキップ
kt-tech.blog

【Next.js】FontAwesomeを導入してアイコンを表示してみよう！

技術約5分で読めます

この記事でわかること

  • Next.js アプリに Font Awesome を入れるのに必要なパッケージと、それぞれの役割
  • layout.tsx で config.autoAddCss = false をする理由（アイコンが巨大化するチラつきを止める）
  • 使いたいアイコンの探し方と、Global import / Individual import の使い分け

Next.js と React に普段から触れていること。手順は Next.js 13（App Router）時点のものですが、パッケージ構成と設定の考え方は現行バージョンでも同じです。

はじめに

こんにちは！Web系の企業に勤務し、地方からフルリモート勤務をしている@takakouと申します

今回は、「【Next.js】FontAwesomeを使ってみよう！」というテーマで記事をシェアします！

この記事を執筆しようと思った経緯としては、私自身が Next.jsアプリケーションにFontAwesomeを導入する記事が古いものが多いなと思ったからです。

そこで、同じ疑問を持つ方の解消ができればと思い執筆しました

記事執筆は未熟者で、至らない点もあるかと思いますが、皆さんのコメントやフィードバックをお待ちしています！

動作環境

記事執筆時の環境です。

端末

  • PC : MacBook Air (M1, 2020)
  • RAM : 8GB
  • OS : macOS Monterey(ver12.1)

バージョン

  • Next.js : 13.4.19
  • React : 18.2.0
  • npm : 9.8.1

FontAwesomeとは

Font Awesomeとは、Webサイトにアイコンフォントを簡単に表示させることができるWebサービスです。

提供されているアイコンフォントは商用利用可能となっていますので、個人開発されているWebサイトやブログに導入できます。

また、Font Awesomeのアイコンフォントはサイズ・色の変更ができるだけでなく、サイズを大きくしても画質が悪くならないといったメリットがあります。

参考: Font Awesome とは（ラクス開発ブログ）

導入手順

ポイント
以下の手順は Font Awesome 公式の React 向けリファレンス を参考にしています。

fontawesome-svg-coreをinstallする

こちらは有料プラン、無料プラン問わず必要なコマンドになりますので実行してください。

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

プラン別のアイコンパッケージ

注意
加入しているプランによって実行コマンドが違います。今回は登録不要な Free Plan で設定を行います。

Free Plan

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

Pro Plan

もし Pro プランに加入されていてそちらを使いたい方は、パッケージの認証設定（公式） を参考に設定してください。

React Componentを追加

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

layout.tsxに記述を追加

JavaScript
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false
Tips
config.autoAddCss = false は、Font Awesome が実行時に <style> を自動挿入するのを止める設定です。これを入れずに CSS を自分で import すると、ページ読み込み直後にアイコンが巨大化してから縮むチラつきが起きます。

使いたいアイコンを検索

Free で使えるアイコンを Font Awesome の検索ページ（Free 絞り込み済み） から探します。

探し方

  • 検索窓に自分が使いたいアイコン、例えばノートの絵文字なら note、家の絵文字なら home のように入れましょう。非同期で検索が行われるので検索ボタンとかは探さなくて大丈夫です。
  • ヒットしたものから使いたいものを選んでクリックします。
  • コードブロックの言語選択欄からReactを選択しましょう。
  • Global import のコードをコピーしておいてください。
  • Individual import の記述もコピーしておきましょう。

アイコンを使いたいページに記述を追加

今回使うアイコン（fa-house）は、先ほどコピーした Global import のコードから solid に含まれていることがわかります。

TypeScript
<FontAwesomeIcon icon="fa-solid fa-house" />

コピーしておいた Individual import の記述に加え、最初に install した @fortawesome/free-solid-svg-icons パッケージの中から faHouse を import しておきます。

TypeScript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouse } from '@fortawesome/free-solid-svg-icons'



....

<FontAwesomeIcon icon={faHouse} />

....
注意
アイコンによって含まれるパッケージが異なります。solid にないアイコンを free-solid-svg-icons から import しようとすると、型エラーにはならずに実行時にアイコンが出ないだけになるので、検索ページでどのスタイルに属するかを確認してください。

これで、ブラウザ上にアイコンが表示されていれば完了です。

参考リンク

おわりに

今回の記事では、 Next.jsアプリケーションにFontAwesome を導入する方法について説明しました

もし興味を持っていただけましたら、ぜひ他の記事も読んでいただけるとうれしいです！

(最後に、気づいた方もいらっしゃると思うのですが、絵文字を入れるのは苦手なので、文章に沿った絵文字を挿入するのに、ChatGPTを利用させていただきましたが、いかがでしたでしょうか。不快に思われた方がいたら申し訳ございません)

更新履歴

  1. 見出しがすべて同じ階層で目次が崩れていたのを、導入手順の下に各ステップを入れ子にする形に修正。見出しの番号と、手書きの目次（ブログ側で自動生成されるため不要）を削除。誤字を修正（Glocal import→Global import、2箇所）。クォートが片方だけのパッケージ名を修正。コードブロックの言語指定を shell/javascript から bash/typescript に修正。autoAddCss を false にする理由と、アイコンのスタイルを間違えたときの症状を補足。引用ブロックを callout に変更。裸 URL をタイトル付きリンクにし、参考文献に入っていた自サイトトップへのリンクを削除。
  2. OGP Description の修正

この記事が役に立ったら共有しよう

Share
B!

Koki

フルスタックエンジニア / React, Next.js, TypeScript

誤字・間違いを報告するXで感想を書く

関連記事

すべて見る