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 ，您可以只向用戶提供所需的圖標，而不是一個大的字體文件，幫助您識別專案中使用了哪些圖標。
麻省理工學院
