🐕

Font Awesome を Next.js で利用する

2023/06/02に公開

Next.js

Font Awesome

tech

はじめに

Font Awesome を Next.js で利用する方法を記載します。
簡単ですが、ソースは以下におきます。

新規プロジェクトを作成

新規にプロジェクトを作成します。

$ pnpm create next-app@latest next-icon-sample --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app

cd next-icon-sample

Font Awesome のインストール

以下のドキュメントを参考にインストールします。

# コアパッケージを導入
$ pnpm i --save @fortawesome/fontawesome-svg-core

# アイコンパッケージの導入
$ pnpm i --save @fortawesome/free-solid-svg-icons
$ pnpm i --save @fortawesome/free-regular-svg-icons

# React用コンポーネントの導入
$ pnpm i --save @fortawesome/react-fontawesome@latest

Font Awesomeを利用する

それでは、実際に Font Awesome を利用してみます。
今回はログインボタンを作成します。

アイコンは以下のサイトから探します。

https://fontawesome.com/icons

探したい名前を検索します。

検索結果からアイコンを選択します。

特定に必要な情報を確認します。fa-right-to-bracket から、faRightToBracket という名前が推測できます。

faRightToBracket でインポートします。大事なのは <FontAwesomeIcon icon={faRightToBracket} className="h-[20px]" color="#fe9611"/> の部分です。

src/app/login.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faRightToBracket } from "@fortawesome/free-solid-svg-icons";
import Link from "next/link";

export default function Login() {
  return (
    <Link
      href="/login"
      className="bg-white-300 flex flex-row justify-center items-center rounded-lg px-2 pt-2 pb-2 border-[2px] border-main500 shadow-md space-x-2 md:px-4 w-[130px] border-[#fe9611]"
    >
      <FontAwesomeIcon icon={faRightToBracket} className="h-[20px]" color="#fe9611"/>
      <label className='text-black text-sm font-bold'>ログイン</label>
    </Link>
  );
}

src/app/app.tsx

import Image from "next/image";
import Link from "next/link";
import Login from "./login";

export default function Home() {
  return (
    <main className="h-screen w-screen bg-white">
      <Login />
    </main>
  );
}

開発環境で確認

開発環境で確認します。

$ pnpm dev

下記の通りボタンが表示されたら成功です。

スタイリングについて

アイコンのスタイリングについては以下に記載があります。

今回は以下を行っています。

サイズは Tailwind で className="h-[20px]" で Tailwind で固定しています。
色は color="#fe9611" で指定しています。

<FontAwesomeIcon icon={faRightToBracket} className="h-[20px]" color="#fe9611"/>

Tailwind で色を変更したいですが、やり方が分からなかったです。

まとめ

Font Awesome を Next.js で利用する方法を紹介しました。
Tailwind を使用してスタイリングできないのでちょっと使いにくいです。
簡単ですが、ソースは以下におきます。