Next.jsにFont Awesomeを導入する。

弊ブログにFont Awesomeを導入した際のメモと注意点。

導入

下記ライブラリをインストール。

npm i --save @fortawesome/react-fontawesome
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-solid-svg-icons

使用方法

// 下記ライブラリをインポートする。
import "@fortawesome/fontawesome-svg-core/styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";

const Hoge = () => {
	  return (
	      <a href="https://github.com/w8f/blog_app">
        {/*
            iconに表示したいアイコンのモジュールを指定する。
            size等の指定も可能（詳細はFontAwesomeIconPropsを確認）
         */}
  	        <FontAwesomeIcon icon={faGithub} size="2x" />
  	      </a>
  	    </div>
  	  );
  	};

注意点

Next.jsのSSGを利用している場合、Font Awesomeのアイコンが表示されなかったり、大きく表示される場合がある。
その場合、下記をインポートし、CSSを先読みにすることで、その事象を避けることができる。

import "@fortawesome/fontawesome-svg-core/styles.css";