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

2022年12月11日React

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

【React】React Iconsの使い方

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

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

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

上は、React Iconsを使う場合に必須のファイルです。

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

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

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

たとえば、Ant Design IconsのAiFillAccountBookとAiFillCameraとAiTwotonePhoneを使いたい場合、上のような記述を利用するjsファイルに記述します。

手順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よりももっとシンプルに使うことができます。