为 React 应用添加图标的最简单方法 😎
优秀的界面设计始于优秀的图标。
图标很重要，因为它们能增强网站的亲和力。例如汉堡菜单。每个人都知道点击汉堡图标可以获取更多信息，或者页面底部的向下箭头提示用户向下滚动。
如果你使用 React，那么在项目中实现图标是非常容易的，各种库提供了成千上万种选择。
我们开始吧。
资源
- react-icons： https: //react-icons.github.io/react-icons
- 演示：https ://react-icons-blog-example.netlify.app/
chansen17 / react-icons-blog如何在 React 项目中使用 React 图标的示例。
1. 我们将使用这个react-icons软件包📦
react-icons可以使用 yarn 或 npm下载。就像这样：
yarn add react-icons
or
npm install react-icons --save
2. 导入图标 ↩️
在 react-icons 的主页上，你会看到很多图标库可供选择，包括 Bootstrap、Font-awesome、Material-UI 等等。选择你最喜欢的图标库吧！
找到喜欢的图标后，点击将代码添加到剪贴板。
现在，App.js我们只需要像这样导入图标和库即可：
// fa is the reference to the font-awesome library
import { FaReact, FaSass, FaLinux} from 'react-icons/fa';
// md is the reference to the material-ui library
import { MdFavoriteBorder, MdChat } from 'react-icons/md';
3. 让我们使用图标吧👍
最后，在你的App()组件中，你只需要像使用其他组件一样使用图标即可。所以回到步骤 2，如果你导入了 React、Sass、Linux、收藏夹和聊天图标，只需像这样使用它们：
function App() {
return (
<ul>
<li><FaReact/></li>
<li><FaSass/></li>
<li><FaLinux/></li>
<li><MdFavoriteBorder/></li>
<li><MdChat/></li>
</ul>
);
}
结论😎
恭喜！就这么简单！只需几步即可将图标添加到您的 React 项目中。您可以从 21 个不同的图标库中选择数千个图标！最棒的是，您只需从每个图标库导入所需的图标，这有助于提高性能！
所以，为你的用户界面增添一些亮点，发挥你的创意吧！
你正在学习Web开发吗？
请查看我关于生产力和React 的其他文章。
