🙂

【Next.js】Font Awesomeを導入する。

2024/06/29に公開

Next.jsでアイコンを使いたくなった時に「Font Awesome」をよく利用することがあります。

毎回やり方を忘れて調べてしまうので、今回はFont AwesomeのReactコンポーネントの導入方法をメモしておきます。

Font Awesomeのライブラリをインストール

$ npm install --save @fortawesome/fontawesome-svg-core
$ npm install --save @fortawesome/react-fontawesome 
$ npm install --save @fortawesome/free-solid-svg-icons
$ npm install --save @fortawesome/free-regular-svg-icons
$ npm install --save @fortawesome/free-brands-svg-icons
# 一括インストール
$ npm install --save @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

表示したいアイコンを追加する

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCircle } from '@fortawesome/free-solid-svg-icons'
import { faUser } from "@fortawesome/free-regular-svg-icons";
import { faFacebookF } from '@fortawesome/free-brands-svg-icons'


export default () => {
  return (
    <div>
      <FontAwesomeIcon icon={faCircle} />
      <FontAwesomeIcon icon={faUser} />
      <FontAwesomeIcon icon={faFacebookF} />
    </div>
  )
}

参考ページ

https://fontawesome.com/v5/docs/web/use-with/react
https://fontawesome.com/docs/web/use-with/react/

Discussion