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

2022年9月22日木曜日

react

t f B! P L

enter image description here

インストール

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が出現した!

enter image description here

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

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

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

試しに colorsize を指定してみよう。

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

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

enter image description here

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

スポンサーリンク

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

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

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

次のように IconContext 配下に置かれたアイコンには、すべてコンテキストで指定したスタイルが適用される。また、下記4つ目のアイコンのように、個別のアイコンに 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>
  );
}

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

enter image description here

まとめ

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

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

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

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ