【React】React Iconsの使い方-react-icons

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

結論から書くと、npm install react-iconsでインストールし、使いたいアイコンだけをreact-icons/aiのようなアイコンセット名付きのパスからimportして、JSXで<AiFillCamera />のようにコンポーネントとして置くだけです。
Font AwesomeやMaterial Design Iconsなど複数のアイコンセットを1つのパッケージで扱え、SVGとして描画されるため追加のCSSやフォントの読み込みは不要です。

【React】React Iconsの使い方

公式ドキュメントの場所は、React Icons公式サイトです。アイコン名の検索もここで行えます。

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

# npmの場合
npm install react-icons
# yarnの場合
yarn add react-icons

上は、React Iconsを使う場合に必須のパッケージです。
古い記事では--saveが付いていますが、npm 5以降は付けなくてもpackage.jsonのdependenciesに記録されます。

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

import { AiFillAccountBook, AiFillCamera, AiTwotonePhone } from "react-icons/ai";

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

たとえば、Ant Design IconsのAiFillAccountBookとAiFillCameraとAiTwotonePhoneを使いたい場合、上のような記述を利用するjsファイルに記述します。
importのパス末尾(ai)はアイコンセットの略称で、Font Awesomeならreact-icons/fa、Material Designならreact-icons/mdのように変わります。アイコン名の先頭2文字がそのセットの略称と一致しているので、公式サイトでアイコンを見つけたら、名前の頭文字からimport元を判断できます。
react-icons直下からまとめてimportせず、セットごとのパスから必要なものだけをimportすると、使わないアイコンがビルドに含まれずファイルサイズを抑えられます。

手順3:JSXで記述

const Navbar = () => {
  return (
    <nav>
      <Link to="/book">
        <AiFillAccountBook />
        本
      </Link>
      <Link to="/camera">
        <AiFillCamera />
        カメラ
      </Link>
      <Link to="/create">
        <AiTwotonePhone />
        TEL
      </Link>
    </nav>
  );
};

上のようにして、JSXで、そのアイコンのコンポーネントを呼びます。
Font Awesomeのように別途CSSやフォントを読み込む必要がなく、シンプルに使えます。

サイズと色を変える

各アイコンはsizeとcolorのpropsを受け取ります。classNameも渡せるので、CSSで指定する場合はそちらを使います。

<AiFillCamera size={24} color="#e11d48" />
<AiFillCamera className="nav-icon" />

アイコンはSVGとして描画され、色の初期値はcurrentColorです。colorを渡さなければ周囲のテキスト色がそのまま使われるため、ボタンやリンクの文字色と自動でそろいます。

複数のアイコンにまとめて同じサイズや色を適用したい場合は、IconContext.Providerで囲みます。

import { IconContext } from "react-icons";

<IconContext.Provider value={{ size: "1.5em", className: "nav-icon" }}>
  <nav>
    <AiFillAccountBook />
    <AiFillCamera />
  </nav>
</IconContext.Provider>

読み込み中の表示に回転するアイコンを使いたい場合は、Reactでローディング(スピナー)を表示する方法で、状態に応じて出し分ける実装を扱っています。
ページ送りの「前へ」「次へ」ボタンにアイコンを置く例はReactでページネーションを自作する方法、条件によってアイコンを切り替える書き方はReactでよく使う条件分岐の記述方法を参考にしてください。