在这篇文章中，你将学习如何使用React Icons库来在你的React项目中显示图标。
简介
增强你的React项目的用户体验的最好方法之一是使用明亮和彩色的图标。它们不仅能让你的应用程序看起来更好，而且还能让你的网站有更现代、更时尚的感觉。
图标甚至可以让设计师节省屏幕空间。此外，图标是通用的，它们的用法对开发者和用户来说都是熟悉的。
例如，你认为什么看起来更好？这个文本。
还是这些图标。
要在React中渲染图标，最常用的库是React Icons。它是一个易于使用的库，用于在你的应用程序中渲染图标。
安装
在你的React项目中，运行以下终端命令。
npm install react-icons
简单用法
首先，将你想要的图标导入你的项目中。
import {FcHeadset} from "react-icons/fc"
然后在你的React组件中渲染它。
return (
<div>
<p>
For coding, you need some good <FcHeadset />
</p>
</div>
);
正如你所看到的，你可以将一个图标作为一个子元素显示。
注意，每个图标包都有自己的子文件夹。例如，如果你想从Game Icons包中获取图标，那么你应该使用下面的导入方式。
import { IconName } from "react-icons/gi";
在列表中渲染图标
像以前一样，像这样导入你的图标。
import { FcIpad, FcElectronics, FcCalculator } from "react-icons/fc";
在这里，我们从平面颜色包中导入了我们的图标。
要渲染它，在你的组件的return 块中写下以下代码。
return (
<div>
<h1> My wishlist</h1>
<ul>
<li>
An iPad <FcIpad />{" "}
</li>
<li>
AMD's new CPU <FcElectronics />
</li>
<li>
Calculator for my exam <FcCalculator />
</li>
</ul>
</div>
);
可点击的按钮和链接
import { FaGoogle, FaRegSun } from "react-icons/fa";
export default function SimpleButton() {
return (
<div>
<p>Login With Google:</p>
<a href="/auth/google">
<FaGoogle />
</a>
<br />
<button onClick={() => alert("Settings page")}>
<FaRegSun />
</button>
</div>
);
}
在第1行，我们从Font Awesome包中导入两个图标。在第7行，我们在a 标签之间渲染FaGoogle 图标。这意味着，这个图标现在是一个链接。之后，在第11行，我们在button 标签之间渲染FaRegSun 图标，从而将该图标变成一个可点击的按钮。
条件性渲染
import { FcAndroidOs } from "react-icons/fc";
export default function ConditionalRendering() {
const usesAndroid = true;
return (
<div>
{usesAndroid ? (
<p>
{" "}
I use <FcAndroidOs />
</p>
) : (
<p> Does not use Android</p>
)}
</div>
);
}
在第3行，我们声明usesAndroid 布尔值，这将使条件渲染成为可能。此外，第6-13行的代码指出，如果usesAndroid 的值是true ，那么就像这样渲染FcAndroidOs 的图标。
否则，渲染一个标准的p 元素。
在两个图标之间进行交换
比方说，你想从Google+的图标换成苹果的图标。你可以使用React Hooks来解决这个问题。
import { useState } from "react";
import { AiFillApple, AiOutlineGoogle } from "react-icons/ai";
export default function SwappingIcons() {
const [icon, setIcon] = useState("apple");
const changeIcon = (state) => {
if (state === "apple") {
return "google";
}
return "apple";
};
return (
<div>
<button onClick={() => setIcon((old) => changeIcon(old))}>Change</button>
<p>
{" "}
I work at:{icon === "apple" ? <AiFillApple /> : <AiOutlineGoogle />}
</p>{" "}
</div>
);
}
首先，我们声明一个icon Hook，决定渲染哪个图标。初始值是apple 。
从第6行到第11行，我们再创建changeIcon 函数，它在apple 或google 之间交换icon 的值。
后来，我们创建了一个简单的button 元素。如果用户点击这个按钮，然后运行changeIcon 函数来互换值。
最后，在第18行，我们指定，如果icon Hook是apple ，那么呈现AiFillApple 图标。否则，渲染AiOutlineGoogle 图标。
使用表单
这里，你将使用Formik库，因为它更容易操作。要安装Formik，运行以下命令。
npm i formik
现在要建立一个带有图标的表单，请写下以下代码。
import React, { useState } from "react";
import { Formik, Field, Form } from "formik";
import { AiFillApple, AiOutlineGoogle } from "react-icons/ai";
export default function FormExample() {
const [icon, setIcon] = useState("");
return (
<div>
<h1>Sign Up</h1>
<Formik
initialValues={{
picked: ""
}}
onSubmit={async (values) => {
setIcon(values.picked);
}}
>
{({ values }) => (
<Form>
<div id="my-radio-group">Picked</div>
<div role="group" aria-labelledby="my-radio-group">
<label>
<Field type="radio" name="picked" value="Apple" />
<AiFillApple />
</label>
<label>
<Field type="radio" name="picked" value="Google" />
<AiOutlineGoogle />
</label>
</div>
<button type="submit">Submit</button>
</Form>
)}
</Formik>
You work at:{icon}
</div>
);
}
在第12行，我们告诉Formik，如果表单没有被提交，那么从这个表单返回的值就是一个空白字符串。然后从第14行到第17行，我们告诉React，当用户提交表单时，将icon Hook设置为选定的值。
后来在第23-29行，我们创建了我们的radio 按钮。它们都将name 属性设置为picked ，这样Formik就可以识别这些元素并检索表单的提交值。
最后，在第35行我们显示了icon 元素的值。
图标配置
请注意，在我们的应用程序中，到目前为止，所有渲染的图标都是微不足道的。幸运的是，React图标库允许我们自定义这些图标的大小和颜色。
颜色
要做到这一点，你将需要使用React的Context API。首先，创建一个单独的组件来设计你的图标。
import { IconContext } from "react-icons";
export default function ConfigIcon({ children }) {
return (
<>
<IconContext.Provider value={{ color: "green" }}>
{children}
</IconContext.Provider>
</>
);
}
根据第7行，IconContext.Provider 将改变我们图标的属性。在这里，我们已经指定color 属性将是green 。
最后，在第8行，我们告诉React去渲染GreenIcon 组件的子元素。这意味着，如果你有一个图标作为GreenIcon 的子元素，那么你的图标将是绿色的。
现在是使用我们的组件的时候了。
import "./styles.css";
import GreenIcon from "./GreenIcon";
import { AiFillFastForward } from "react-icons/ai";
export default function App() {
return (
<div className="App">
<ConfigIcon>
<AiFillFastForward />
</ConfigIcon>
</div>
);
}
我们的AiFillFastForward 组件现在将是绿色的了。
尺寸
return (
<>
<IconContext.Provider value={{ color: "green", size: "4em" }}>
{children}
</IconContext.Provider>
</>
);
在第3行，我们将大小设置为4em 。默认的图标尺寸是1em 。
现在，定制的图标看起来更大、更好了
总结
React Icon库使用起来绝对是轻而易举。它不仅提供了你的项目所需的所有流行的图标，而且速度极快，体积极小，可以保证你的应用程序完全不滞后。
非常感谢您的阅读!
