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: [10,12,14,18,20,23, 30, 40, 50, 60, 70, 100, 200],
    iconSizeString: ['10','12','14','18','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	'#09BB07'	否	icon的颜色，同css的color

*注：当size设置小于12时，浏览器会处理显示成最小可见fon-size为12；

当size设置小于8时，安卓会处理显示成最小可见fon-size为8；

ios会设置当前设置的font-size大小。