taro icons

taro-icons

Mini program icon library based on Taro

characteristic

• Load on demand, choose to load different icon libraries according to your own needs, and reduce package size
• Approximately 6700 icons to choose from

Supported icon libraries:

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

Install

npm install taro-icons --save

use

Import the icon library scss file you need in app.js , such as 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

Then introduce component corresponding to d where the icon is needed:

 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 is required and can be found on the corresponding website. Please refer to example for specific usage.

icon props

property	illustrate	type	default value
name	The name of the icon that needs to be displayed can be found on the corresponding icon library website.	String
size	Icon size (px)	Number	twenty four
color	icon color	String	#000000
family	FontAwesome unique properties (solid, regular, brands)	String	solid

️ Things to note

In微信开发者工具, select Settings->Project Settings->Debug Basic Library, and set version 2.2.3 or above before the icon can be displayed normally.