【React】Font Awesomeの使い方-react-fontawesome

2022年12月10日React

ReactでFont Awesomeを使う方法を紹介します。

【React】Font Awesomeの使い方

公式ドキュメントの場所は、こちらです。

手順1:必須ファイルをインストール

#npmの場合
npm i --save @fortawesome/fontawesome-svg-core
#yarnの場合
yarn add @fortawesome/fontawesome-svg-core

上は、Font Awesomeを使う場合に必須のファイルです。
そして、下が、使うものだけをインストールすればいいファイルです。

手順2:使うファイルだけをインストール

# npmの場合:
# 無料アイコンのみ
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

#yarnの場合
# 無料アイコンのみ
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons

上のインストールは無料のアイコンのみです。Pro版もやり方は同じです。
URLは上の公式ドキュメントを参照してみてください。

手順3:Reactファイルでインポート

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  import {
    faHouse,
    faFilePen,
    faArrowRightToBracket,
  } from "@fortawesome/free-solid-svg-icons";

使うものだけをインポートします。

手順4:JSXで記述

const Navbar = () => {
  return (
    <nav>
      <Link to="/">
        <FontAwesomeIcon icon={faHouse} />
        ホーム
      </Link>
      <Link to="/login">
        <FontAwesomeIcon icon={faArrowRightToBracket} />
        ログイン
      </Link>
      <Link to="/create">
        <FontAwesomeIcon icon={faFilePen} />
        記事作成
      </Link>
    </nav>
  );
};

上のようにして、JSXで、FontAwesomeIconコンポーネントを呼びます。
アイコンの名称がたとえば、fa-houseの場合、faHouseとしたら読み込めます。