icon

图标。

效果展示

示例代码

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">icon</text>
        <text class="page__desc">icon图标</text>
    </view>
    <view class="page__bd">
        <view class="group">
            <block wx:for="{{iconSize}}">
                <icon type="success" size="{{item}}" />
            </block>
        </view>
        <view class="group">
            <block wx:for="{{iconSizeString}}">
                <icon type="success" size="{{item}}" />
            </block>
        </view>
        <view class="group">
            <block wx:for="{{iconType}}">
                <icon type="{{item}}" size="40" />
            </block>
        </view>
        <view class="group">
            <block wx:for="{{iconColor}}">
                <icon type="success" size="40" color="{{item}}" />
            </block>
        </view>
    </view>
</view>

JS

Page({
  data: {
    iconSize: [-2,0,4,6,10,20,23, 30, 40, 50, 60, 70, 100, 200],
    iconSizeString: ['-2','0','4','6','10','20','23', '30', '40', '50', '60', '70', '100', '200'],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple', 'rgba(0,23,125,0.3)'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  }
})

WXSS

.group{
    flex-direction: row;
    align-items: center;
}

API

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的颜色，同css的color

多平台支持

属性	平台支持
type	支付宝
size	支付宝
color	支付宝

注释：

支付宝size属性默认值不一致，默认颜色为蓝色