图标

属性

属性名类型默认值说明
typeStringicon 的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
sizeNumber23icon 的大小，单位 px
colorColoricon 的颜色，同 css 的 color

各端支持度

属性微信小程序H5ReactNative百度小程序支付宝小程序字节跳动小程序
type✔✔✔✔✔✔
size✔✔✔✔✔✔
color✔✔✔✔✔✔
示例：
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Icon } from '@tarojs/components'
  4. export default class PageView extends Component {
  5.   constructor() {
  6.     super(...arguments)
  7.   }
  9.   render() {
  10.     return (
  11.       <View className='components-page'>
  12.         <Icon size='60' type='success' />
  13.         <Icon size='60' type='info' />
  14.         <Icon size='60' type='warn' color='#ccc' />
  15.         <Icon size='60' type='warn' />
  16.         <Icon size='60' type='waiting' />
  17.         <Icon size='20' type='success_no_circle' />
  18.         <Icon size='20' type='warn' />
  19.         <Icon size='20' type='success' />
  20.         <Icon size='20' type='download' />
  21.         <Icon size='20' type='clear' color='red' />
  22.         <Icon size='20' type='search' />
  23.       </View>
  24.     )
  25.   }
  26. }