Font Awesome を Next.js で利用してみた

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

ウェブシステムでアイコンを表示させたい場合に活用できるアイコンライブリとしてFont Awesomeというライブリがあります。

このFont AwesomeをNext.jsで利用してみたので、利用方法をまとめたいと思います。

前提条件

今回試した環境は以下のとおりです。

• Node.js
  • 16.17.0
• Next.js
  • 12.2.5

また、パッケージマネージャには yarn を利用しています。

セットアップ

以下のドキュメントを参考にセットアップを行っていきます。

まずはプロジェクトに以下のようにパッケージのセットアップを行います。

# コアパッケージの導入
yarn add @fortawesome/fontawesome-svg-core

# アイコンパッケージの導入
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons

# React用コンポーネントの導入
yarn add @fortawesome/react-fontawesome@latest

これでセットアップは完了です。具体的には以下がpackage.jsonに追加されました。

package.json

(...snip...)
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
(...snip...)

Font Awesomeを利用してみる

次に、実際にページ上でアイコンを利用してみます。

利用するアイコンについては、公式サイトの「Icons」のページから検索が出来ます。

今回はFree版を利用するので、gameでキーワード検索し、更に「FEATURED > Free」で絞り込んで検索した結果から、gamepadを利用してみたいと思います。

アイコンの利用の仕方はいくつかあるようですが、今回は以下を参考にしてみました。

• Add Icons with React | Font Awesome Docs

こちらを参考にして作成したページが以下になります。

pages/fontawesome.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGamepad } from "@fortawesome/free-solid-svg-icons";

export default function FontAwesome() {
  return (
    <div style={{ width: "100%" }}>
      <div style={{ margin: "10px", fontSize: "x-large" }}>
        <FontAwesomeIcon icon={faGamepad} />
        アイコン表示サンプル
      </div>
    </div>
  );
}

画面表示としては、以下のようになります。なお、OS設定でダークモードを設定しているのでstyles/globals.cssに従って以下のようなダークテーマで表示されています。

また、アイコンはスタイルを設定することで色を付けたり、サイズを変更することもできます。

pages/fontawesome.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGamepad } from "@fortawesome/free-solid-svg-icons";

export default function FontAwesome() {
  return (
    <div style={{ width: "100%" }}>
      <div style={{ margin: "10px", fontSize: "x-large" }}>
        <FontAwesomeIcon
          icon={faGamepad}
          style={{ fontSize: "xxx-large", color: "gray", marginRight: "20px" }}
        />
        アイコン表示サンプル
      </div>
    </div>
  );
}

少し大きくなって、色も変わりましたね！

なお、今回はstyleを利用してスタイルを設定しましたが、以下のドキュメントのようにスタイル設定することも可能です。beatなどを設定すると、アニメーションで動きが付いて面白いですね。

まとめ

以上、Font Awesome を Next.js で利用してみました。

ウェブシステムではアイコンを利用したいケースは多いので、うまくアイコンライブリを活用できればと思います。

どなたかのお役に立てば幸いです。それでは！