Icon

图标。扫码体验：

img.jpg

属性名类型默认值描述最低版本
typeStringicon 类型，有效值： info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loadingloading(1.7.2)
sizeNumber23icon 大小，单位px
colorColoricon 颜色，同 css 的 color

Screenshot

icon

示例代码

  1. <block a:for="{{iconType}}">
  2.   <view class="item">
  3.     <icon type="{{item}}" aria-label="{{item}}" size="45"/>
  4.     <text>{{item}}</text>
  5.   </view>
  6. </block>
  8. <block a:for="{{iconSize}}">
  9.   <view class="item">
  10.     <icon type="success" size="{{item}}"/>
  11.     <text>{{item}}</text>
  12.   </view>
  13. </block>
  15. <block a:for="{{iconColor}}">
  16.   <view class="item">
  17.     <icon type="success" size="45" color="{{item}}"/>
  18.     <text style="color:{{item}}">{{item}}</text>
  19.   </view>
  20. </block>
  1. Page({
  2.   data: {
  3.     iconSize: [20, 30, 40, 50, 60],
  4.     iconColor: [
  5.       'red', 'yellow', 'blue', 'green'
  6.     ],
  7.     iconType: [
  8.       'success',
  9.       'info',
  10.       'warn',
  11.       'waiting',
  12.       'clear',
  13.       'success_no_circle',
  14.       'download',
  15.       'cancel',
  16.       'search',
  17.     ]
  18.   }
  19. })

原文: https://docs.alipay.com/mini/component/icon