こもるーとたぬきの備忘録

profile

【Next.js】FontAwesomeをNext.jsに追加したい話

JavaScriptNext.jsReact開発
Font AwesomeをNext.jsで使用する際、公式のSet Up with Reactを確認しながら設定をする。
しかし、このページの通りに実行する画面いっぱいにiconが表示されてしまうなど、レイアウトに崩れが生じる。
いつも調べながら実装していたので、いい加減備忘録として手順をまとめる。
開発環境バージョン
Next.js15.2.1
TypeScript5.0.0
sass1.85.1

実装手順

必要なパッケージをインストール

以下のコマンドを使用して、必要なパッケージをインストール


    #必須：コアパッケージ 
    npm i --save @fortawesome/fontawesome-svg-core 
    #必須:Reactコンポーネント 
    npm i --save @fortawesome/react-fontawesome@latest
    #必要なものだけ:iconパッケージ 
    npm i --save @fortawesome/free-solid-svg-icons
    npm i --save @fortawesome/free-regular-svg-icons 
    npm i --save @fortawesome/free-brands-svg-icons

スタイルの調整

※以下がいつも調べていたこと

Use React with...の記事によると、cssの管理が他のフレームワークとは異なるらしく、アイコンが巨大化してしまう不具合があるとのこと。
それを解消するためにsrc/app/layout.tsxに以下の記述を追加する必要がある。 


  import { config } from '@fortawesome/fontawesome-svg-core'
  import '@fortawesome/fontawesome-svg-core/styles.css'
  config.autoAddCss = false