膨大なアイコンを収録！React Iconsでアイコンを手軽に配置してみよう

インストール

npm install で普通にインストール。

npm install react-icons --save

React Icons に収録されているアイコンは、次のURLから確認できる。

https://react-icons.github.io/react-icons

スポンサーリンク

アイコンを置いてみよう

React Iconsは「Font Awesome」「Bootstrap Icons」「BoxIcons」などを始めとする多くのアイコンライブラリを収録している。

今回は「Font Awesome」 のアイコンから Youtube アイコンでも置いてみましょう。

import { FaYoutube } from 'react-icons/fa';

function SampleComponet() {
  return (
    <div>
      <FaYoutube />
    </div>
  );
}

黒い Youtubeが出現した！

アイコンのスタイルを変更する

各アイコンコンポーネントには、次のリストに示すプロパティがある。これらを設定することで、アイコンの色、サイズなどを変更可能だ。

Key	Default	Notes
color	undefined (inherit)
size	1em
className	undefined
style	undefined	CSS の Style
attr	undefined	HTMLの標準属性を上書きするためのプロパティ
title	undefined	マウスカーソルが上にきた時に表示するタイトル

試しに color と size を指定してみよう。

import { FaYoutube } from 'react-icons/fa';

function SampleComponet() {
  return (
    <div>
      <FaYoutube color="red" size="10rem"/>
    </div>
  );
}

なんか、それっぽくなりましたね！

スポンサーリンク

アイコンのスタイルを一括で変更

先ほどアイコンのプロパティで、アイコンのスタイルが変更できると伝えたが、配置するアイコンの数が多くなってくると、個別に prop を指定するのは大変だ。

そこで、React Context APIを使用して、アイコンのスタイルを一括で変更できる。

次のように IconContext 配下に置かれたアイコンには、すべてコンテキストで指定したスタイルが適用される。また、下記４つ目のアイコンのように、個別のアイコンに prop を指定すれば、個別にスタイルを指定することも可能だ。

import { FaTiktok, FaTwitter, FaYoutube } from 'react-icons/fa';
import { IconContext } from 'react-icons/lib';

function SampleComponet() {
  return (
    <div>
      <IconContext.Provider value={{ color: "blue", size: "10rem" }}>
        <FaYoutube/>
        <FaTwitter/>
        <FaTiktok/>
        <FaYoutube color="red"/>
      </IconContext.Provider>
    </div>
  );
}

上を実行するとこうなる。

まとめ

紹介してきたように、React Iconsは手軽に膨大なアイコンライブラリを使用できるコンポーネントである。

すべて無料で使えるが、使用するアイコンライブラリによってライセンスが違うので、ライセンス規約を読んでから使いましょう。

https://github.com/react-icons/react-icons#icons