【React】尝试使用React Icons来添加图标

这篇文章的目标是什么？

• Next.jsでブログを作成したときの備忘録

Reactのプロジェクトでアイコンを使用する際に使用したReact Iconについて

大纲

• React Iconsについて

• React Iconsインストール

React Iconsの使い方

关于React Icons

提供了一个用于 React 的库，可以轻松地使用各种图标，如 FontAwesome 和VSCode 的图标。由于是一个库，只需安装即可在 React 项目中轻松使用图标。React Icons 官方网站。

安装React Icons

执行 React Icons 官方网站上列出的以下命令。

npm install react-icons --save

React Icons的使用方法

请选择图标的类别。

在左侧边栏上有一个图标类别的列表，从中选择你想要使用的类别。
这次我选择了包含Facebook、Twitter和GitHub图标的”IcoMoon Free”。

导入

請將選中的類別圖示代碼從「」複製，然後將其貼到要使用圖示的檔案中，以便能夠使用該圖示。

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

导入要使用的图标。

点击要使用的图标，这些图标显示在「图标」部分。点击后，可以复制。在点击后，将其粘贴到刚刚粘贴的代码的IconName部分。这次选择了Facebook、Twitter和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>