react开源_React Icons让您可以访问数百个开源图标

react开源

Learn about a React library called React Icons that provides thousands of free, Open Source icons that you can use in your next project.

了解称为React Icons的React库，该库提供了数千个免费的开源图标，可在下一个项目中使用。

If you’re working on a React app that needs icons, check out react-icons! It includes 9 popular Open Source icon libraries, including Font Awesome and Material Design.

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

---

---

To get started, install the module using npm:

首先，使用npm安装模块：

$ npm install --save react-icons

React Icons exports icons as React components so it’s really intuitive:

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>
    )
  }
}

所有您可以出口！ (All You Can Export!)

Since react-icons includes 9 icon libraries, you’ll always find several variations of an icon. If you’re always on the never-ending quest to find the icon that’s “just right” this is for you! 

由于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

自定义样式 (Customizing Styles)

Icons will generally inherit CSS styles, but if you’d like more customization power you can pass props to your icons.

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

In the example below, color and size are unique to react-icon, but you can also pass the standard style prop:

在下面的示例中， color和size是react-icon唯一的，但是您也可以传递标准style prop：

<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' }}
/>

轻巧和捆绑式 (Lightweight & Bundler-friendly)

Despite React Icons containing hundreds of icons, it’s doesn’t leave a big footprint in your bundle.

尽管React Icons包含数百个图标，但它并没有在您的程序包中留下很大的足迹。

Webpack /包裹优化 (Webpack/Parcel optimizations)

react-icons has a configuration in its package.json file to instruct bundlers to perform tree-shaking when building your app. This means only icons you explicitly import gets bundled!

react-icons在package.json文件中具有配置，以指示捆绑程序在构建应用程序时执行摇树操作 。 这意味着仅捆绑了您明确import图标！

SVG格式 (SVG format)

All of the icons in react-icons are SVG (scalable vector graphics). This means significantly smaller file sizes per icon than if they were raster image formats (like *.jpeg or *.png). SVG files are generally orders of magnitude smaller than other image formats, especially for things like icons!

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

开源友好 (Open Source Friendly)

You can use react-icons in any non-commercial/commercial projects because of the permissive licenses of each of the libraries:

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

• Font Awesome  CC BY 4.0 License

  Font Awesome CC BY 4.0许可

• Ionicons  MIT

  离子离子麻省理工学院

• Material Design icons  Apache License Version 2.0

  物料设计图标 Apache许可证版本2.0

• Typicons  CC BY-SA 3.0

  Typicons CC BY-SA 3.0

• Github Octicons icons  MIT

  麻省理工学院Github Octicons图标

• Feather  MIT

  羽毛 MIT

react-icons itself is released under the MIT license.

react-icons本身是根据MIT许可发布的。

Note: View the collection of icons included in react-icons on their demo website

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

翻译自: https://www.digitalocean.com/community/tutorials/react-react-icons-open-source-icons

react开源