react icons
v5.3.0
使用react-icons轻松在React项目中包含流行的图标，它利用ES6导入，允许您仅包含项目正在使用的图标。
yarn add react-icons
# or
npm install react-icons --save用法示例
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
}查看文档以获取更多使用示例以及如何使用其他包中的图标。注意：每个图标包在您导入的react-icons下都有自己的子文件夹。
例如，要使用Material Design中的图标，您的导入将为： import { ICON_NAME } from 'react-icons/md';
注意此选项已经有一段时间没有新版本了。更多信息#593
如果您的项目规模扩大，则可以使用此选项。此方法的缺点是安装包需要很长时间。
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --save用法示例
import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} | 图标库 | 执照 | 版本 | 数数 |
|---|---|---|---|
| 圆周图标 | MPL-2.0许可证 | 1.0.0 | 288 |
| 真棒字体 5 | CC BY 4.0 许可证 | 5.15.4-3-gafecf2a | 1612 |
| 真棒字体 6 | CC BY 4.0 许可证 | 6.5.2 | 2045 |
| 离子图标 4 | 麻省理工学院 | 4.6.3 | 696 |
| 离子图标 5 | 麻省理工学院 | 5.5.4 | 第1332章 |
| 材料设计图标 | Apache 许可证版本 2.0 | 4.0.0-98-g9beae745bb | 4341 |
| 典型图标 | 抄送-SA 3.0 | 2.1.2 | 第336章 |
| Github Octicons 图标 | 麻省理工学院 | 18.3.0 | 264 |
| 羽毛 | 麻省理工学院 | 4.29.1 | 第287章 |
| 露西德 | 国际标准委员会 | v5.1.0-6-g438f572e | 1215 |
| 游戏图标 | 抄送3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| 天气图标 | SIL OFL 1.1 | 2.0.12 | 219 |
| 恶魔人 | 麻省理工学院 | 1.8.0 | 192 |
| 蚂蚁设计图标 | 麻省理工学院 | 4.4.2 | 第831章 |
| 引导图标 | 麻省理工学院 | 1.11.3 | 2716 |
| 混音图标 | Apache 许可证版本 2.0 | 4.2.0 | 2860 |
| 平面颜色图标 | 麻省理工学院 | 1.0.2 | 第329章 |
| 索环图标 | Apache 许可证版本 2.0 | 4.12.1 | 第635章 |
| 英雄图标 | 麻省理工学院 | 1.0.6 | 第460章 |
| 英雄图标 2 | 麻省理工学院 | 2.1.3 | 第888章 |
| 简单的图标 | CC0 1.0 通用 | 12.14.0 | 3209 |
| 简单的线条图标 | 麻省理工学院 | 2.5.5 | 189 |
| 图标月亮 免费 | CC BY 4.0 许可证 | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 第491章 |
| 盒子图标 | 麻省理工学院 | 2.1.4 | 1634 |
| CSS.gg | 麻省理工学院 | 2.1.1 | 704 |
| VS 代码图标 | 抄送4.0 | 0.0.35 | 第461章 |
| 表图标 | 麻省理工学院 | 3.2.0 | 5237 |
| 主题化图标 | 麻省理工学院 | v0.1.2-2-g9600186 | 第352章 |
| 基数图标 | 麻省理工学院 | @radix-ui/[email protected] | 318 |
| 荧光粉图标 | 麻省理工学院 | 2.1.1 | 9072 |
| Icons8 线真棒 | 麻省理工学院 | 1.3.1 | 第1544章 |
您可以通过提交拉取请求或创建问题来添加更多图标。
您可以使用 React Context API 配置 React-icons 属性。
需要React 16.3或更高版本。
import { IconContext } from "react-icons" ;
< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
< div >
< FaFolder / >
< / div >
< / IconContext . Provider > ;| 钥匙 | 默认 | 笔记 |
|---|---|---|
color | undefined （继承） | |
size | 1em | |
className | undefined | |
style | undefined | 可以覆盖尺寸和颜色 |
attr | undefined | 被其他属性覆盖 |
title | undefined | 可访问性的图标说明 |
导入路径已更改。您需要从旧样式重写。
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} // NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
}最终得到一个大的 JS 包？看看这个问题。
从版本 3 开始， vertical-align: middle不会自动给出。请使用 IconContext 指定 className 或指定内联样式。
< IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } > className样式成分
< IconContext . Provider value = { { className : 'react-icons' } } >CSS
. react-icons {
vertical-align : middle;
}可以删除对@types/react-icons的依赖。
yarn remove @types/react-iconsnpm remove @types/react-icons./build-script.sh将构建整个项目。另请参阅 CI 脚本以获取更多信息。
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn build首先，检查讨论，看看是否有人想要添加图标集。
https://github.com/react-icons/react-icons/discussions/categories/new-icon-set
要获取的 SVG 文件在此文件中进行管理。编辑此文件并运行yarn fetch && yarn check && yarn build 。
https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
注意该项目目前尚未主动接受预览站点的 PR。
预览站点是react-icons网站，使用Astro+React 构建。
cd packages/react-icons
yarn fetch
yarn build
cd ../preview-astro
yarn start该演示是一个 Create React App 样板，其中添加了react-icons作为依赖项，以便于测试。
cd packages/react-icons
yarn fetch
yarn build
cd ../demo
yarn start所有主流浏览器都支持 SVG。使用react-icons ，您可以只向用户提供所需的图标，而不是一个大的字体文件，帮助您识别项目中使用了哪些图标。
麻省理工学院
