ReactIcons让您可以访问数百个开源图标

了解一个名为 React Icons 的 React 库，它提供了数千个免费的开源图标，您可以在下一个项目中使用这些图标。

如果您正在开发需要图标的 React 应用程序，请查看 react-icons！它包含 9 个流行的开源图标库，包括 Font Awesome 和 Material Design。

首先，使用 npm 安装模块：

$ npm install --save react-icons

React Icons 将图标导出为 React 组件，因此非常直观：

import React, { Component } from 'react';
import { FaHeart } from "react-icons/fa";  // Font Awesome

class App extends Component {
  render() {
    return (
      <div>
        Hello World
        <FaHeart />
      </div>
    )
  }
}

所有你可以出口！

由于 react-icons 包含 9 个图标库，您总能找到一个图标的多种变体。如果您一直在寻找“恰到好处”的图标，这是给您的！ 👌

import { FaCheck } from "react-icons/fa";       // Font Awesome
import { IoMdCheckmark } from "react-icons/io"; // Ionicons
import { MdCheck } from "react-icons/md";       // Material Design
import { GoCheck } from "react-icons/go";       // Github Octicon

自定义样式

图标通常会继承 CSS 样式，但如果您想要更多的自定义功能，您可以将道具传递给您的图标。

在下面的示例中，color 和 size 是 react-icon 独有的，但您也可以传递标准的 style 属性：

<FaBeer
  color="#008f68"
  size="50px"
  style={{ margin: '0 5px' }}
/>
<IoIosPaperPlane
  color="#6DB65B"
  size="50px"
  style={{ margin: '0 5px' }}
/>
<MdCloud
  color="#4AAE9B"
  size="50px"
  style={{ margin: '0 5px' }}
/>

轻量级和捆绑器友好

尽管 React Icons 包含数百个图标，但它不会在你的包中留下很大的足迹。

Webpack/Parcel 优化

react-icons 在其 package.json 文件中有一个配置，用于指示捆绑程序在构建您的应用程序时执行 tree-shaking。这意味着只有您明确 import 的图标才会被捆绑！

SVG 格式

react-icons 中的所有图标都是 SVG（可缩放矢量图形）。这意味着每个图标的文件大小比光栅图像格式（如 *.jpeg 或 *.png）要小得多。 SVG 文件通常比其他图像格式小几个数量级，尤其是对于图标之类的东西！

开源友好

由于每个库的许可许可，您可以在任何非商业/商业项目中使用 react-icons：

字体真棒 CC BY 4.0许可证
离子麻省理工学院
Material Design 图标 Apache License Version 2.0
典型 CC BY-SA 3.0
Github Octicons 图标 MIT
羽毛麻省理工学院

react-icons 本身是在 MIT 许可下发布的。

注意：在他们的演示网站上查看react-icons中包含的图标集合