taro icons下載 - taro icons源碼下載

taro icons

Ai源碼

v0.3

下載

taro-icons

基於Taro 的小程式圖示庫

example

特性

按需加載，根據自身需求選擇加載不同的圖示庫，減少包大小
約6700 個icon 可供選擇

支援的圖標庫:

Ionicons (v4.5.5, 696 icons, ～134KB)
MaterialIcons (v3.0.1, 935 icons, ～112KB)
MaterialCommunityIcons (v3.5.95, 3596 icons, ～495KB)
FontAwesome (v5.8.1, 1513 icons, ~322KB)

安裝

npm install taro-icons --save

使用

在app.js中匯入你需要的圖示庫scss文件，如MaterialIcons :

 // app.js
// 请根据需要选择导入的 scss，这里全部导入
import 'taro-icons/scss/MaterialCommunityIcons.scss' // 495KB
import 'taro-icons/scss/MaterialIcons.scss' // 112KB
import 'taro-icons/scss/Ionicons.scss' // 134KB
import 'taro-icons/scss/FontAwesome.scss' // 322KB

然後在需要用到圖示的地方引入對應d的component使用:

 import {
  MaterialIcons ,
  MaterialCommunityIcons ,
  Ionicons ,
  FontAwesome ,
} from 'taro-icons' ;
...

< MaterialIcons name = 'settings' size = { 24 } color = '#000000' />
< MaterialCommunityIcons name = 'account' size = { 32 } color = '#000000' / >
< Ionicons name = 'ios-woman' size = { 32 } color = 'pink' />
< FontAwesome family = 'brands' name = 'weixin' size = { 32 } / >

其中name必填，可以在對應的網站上找到具體用法請參考example

Icon props

屬性	說明	類型	預設值
name	需要顯示的圖示名稱，可以在對應圖示庫網站找到	String
size	圖示大小（px）	Number	24
color	圖示顏色	String	#000000
family	FontAwesome 特有屬性(solid、regular、brands)	String	solid