了解名为 React 图标的 React 库,它提供了数千个免费的开源图标,您可以在下一个项目中使用。
如果您正在开发需要图标的 React 应用程序,请查看 react-icons!该应用程序包含 9 个流行的开源图标库,包括 Font Awesome和 Material Design。
要开始,请使用npm安装模块:
1$ npm install --save react-icons
React 图标将图标导出为 React 组件,因此非常直观:
1import React, { Component } from 'react';
2import { FaHeart } from "react-icons/fa"; // Font Awesome
3
4class App extends Component {
5 render() {
6 return (
7 <div>
8 Hello World
9 <FaHeart />
10 </div>
11 )
12 }
13}
所有你可以出口的!
由于反响图标包括9个图标库,你总是会找到几个图标的变体. 如果你一直在寻找正确的图标的永无止境的追求,这是为你!
1import { FaCheck } from "react-icons/fa"; // Font Awesome
2import { IoMdCheckmark } from "react-icons/io"; // Ionicons
3import { MdCheck } from "react-icons/md"; // Material Design
4import { GoCheck } from "react-icons/go"; // Github Octicon
定制风格
图标通常会继承CSS风格,但如果您想要更多的自定义能力,您可以向您的图标传递特许权。
在下面的示例中,颜色和尺寸是唯一的响应图标,但您也可以通过标准的风格支持:
1<FaBeer
2 color="#008f68"
3 size="50px"
4 style={{ margin: '0 5px' }}
5/>
6<IoIosPaperPlane
7 color="#6DB65B"
8 size="50px"
9 style={{ margin: '0 5px' }}
10/>
11<MdCloud
12 color="#4AAE9B"
13 size="50px"
14 style={{ margin: '0 5px' }}
15/>
轻量化和 Bundler 友好
尽管 ** React 图标包含数百个图标,但它不会在您的包中留下很大的痕迹。
Webpack / 部件优化
「react-icons」在其「package.json」文件中具有配置,以指示包裹者在构建您的应用程序时执行 tree-shaking。
SVG 格式
所有反应图标中的图标都是SVG(可扩展的矢量图形)。这意味着每个图标的文件大小要小得多,而不是如果它们是拉斯特图像格式(如*.jpeg或*.png).SVG文件通常大小小于其他图像格式,特别是像图标这样的东西!
开源友好
您可以在任何非商业/商业项目中使用响应图标,因为每个库的许可证:
- 字体 Awesome CC BY 4.0 许可证
- Ionicons MIT
- 材料设计图标 Apache 许可证版本 2.0
- 图标 CC BY-SA 3.0
- Github 图标 图标 MIT
- 羽毛 MIT
react-icons本身是在MIT许可证下发布的。
<$>[注]
注:在他们的 演示网站
<$>上查看包含在反应图标中的图标集