【React】React Iconsでアイコンを使ってみる

この記事の目的

• Next.jsでブログを作成したときの備忘録
• Reactのプロジェクトでアイコンを使用する際に使用したReact Iconについて

概要

• React Iconsについて
• React Iconsインストール
• React Iconsの使い方

React Iconsについて

React Icons は、FontAwesomeやVSCodeのアイコンなどの様々なアイコンを簡単に利用することができる React用のライブラリになります。
ライブラリなのでインストールするだけでReactのプロジェクトで簡単にアイコンを使用できるようになります。
React Icons の公式サイト

React Iconsインストール

React Icons の公式サイトに記載のある下記のコマンドを実行

npm install react-icons --save

React Iconsの使い方

今回は例としてフェイスブックとツイッター、GitHubのアイコンを使用していきます。

①アイコンのカテゴリーを選択

左サイドバーにアイコンのカテゴリーの一覧があるので、そこから使用したいカテゴリーを選択。
今回はフェイスブックとツイッター、GitHubのアイコンがある「IcoMoon Free」を選択しています

②インポート

選択したカテゴリーのアイコンが使用できるように「」にあるコードをコピーして、アイコンを使用するファイルに貼り付けます

import { IconName } from "react-icons/im";

③使用するアイコンをインポート

「Icons」の部分に表示してあるアイコンから使用したいものをクリックするとコピーできるのでクリック
クリック後、先ほど貼り付けたコードのIconName部分に貼り付ける
今回はフェイスブックとツイッター、GitHubのアイコンを選択しています

import { ImFacebook, ImTwitter, ImGithub } from "react-icons/im";

その後表示する部分で使用します。下記が使用例です。

// 使用するアイコンをインポート
import { ImFacebook, ImTwitter, ImGithub } from "react-icons/im";

export const Header = () => {
import { ImFacebook, ImTwitter, ImGithub } from "react-icons/im";

export const Header = () => {
    return (
        <header className="bg-gray-50">
            <div className="xl:container xl:mx-auto flex flex-col items-center sm:flex-row sm:justify-between text-center py-3">
                <div className="md:flex-none w-96 order-2 sm:order-1 flex justify-center py-4 sm:py-0">
                    <input type="text" className="input-text" placeholder="Search..." />
                </div>
                <div className="shrink w-80 sm:order-2">
                    <a>Design</a>
                </div>
                <div className="w-96 order-3 flex justify-center">
                    <div className="flex gap-6">
                        {/* インポートしたアイコンを使用 */}
                        <a><ImFacebook/></a>
                        <a><ImTwitter/></a>
                        <a><ImGithub/></a>
                    </div>
                </div>
            </div>

        </header>
    );
};

画面で確認するとアイコンが表示できているのが確認できます

ちなみにカラーも下記のように追加することで変更できます

<a><ImFacebook color="#888888" /></a>
<a><ImTwitter color="#888888" /></a>
<a><ImGithub color="#888888" /></a>