Next.jsにFont Awesomeを導入

これまでは、components/layout.js にて、CDN経由で Font Awesome を読み込んでたんですが、
不必要なページでも常に読み込んでたためにGoogle Lighthouseスコアが悪くなってたので、
必要なページにだけ読み込む為、コンポーネントでやることに。

まず、必須なものをインストール

$ npm install @fortawesome/react-fontawesome
$ npm install @fortawesome/fontawesome-svg-core

使用するアイコンは、「fa-Clock」「fa-folder-open」
Font Awesomeサイトで調べます。

上の「icon」をチェックし、左の「Free」「Regular」をチェック。
151個の中から探してみてください。ありましたね！

「clock」も「fa-folder-open」も、「Regular Style」にあるので、
regularをインストールします。

$ npm install @fortawesome/free-regular-svg-icons

Font Awesomeアイコンを使うページにて、

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClock } from "@fortawesome/free-regular-svg-icons";
import { faFolderOpen } from "@fortawesome/free-regular-svg-icons";

export default function BlogId({ blog }) {
  return (
	// 省略
	<FontAwesomeIcon className="w-4 h-6" icon={faClock} />
	<FontAwesomeIcon className="w-4 h-6" icon={faFolderOpen} />
	// 省略
  );
}

className内の値は、Tailwinds.cssでの指定…これでアイコンサイズ設定してます。


やった！