支付宝小程序其他手势 图标·Am-icon

图标。

扫码体验

示例代码

{
 "defaultTitle": "am-icon icon 图标",
 "usingComponents": {
   "am-icon": "mini-ali-ui/es/am-icon/index"
 }
}

<view class="icon-list">
 <block a:for="{{iconTypes}}">
   <view class="icon-item">
     <am-icon type="{{item}}" size="30" />
     <text class="icon-desc">{{item}}</text>
   </view>
 </block>
</view>

Page({
 data: {
   iconTypes: [
     'qr',
     'share',
     'picture',
     'add-square',
     'file',
     'text',
     'minus-square',
     'barcode',
     'wallet',
     'scan-code',
     'receipt',
     'down-circle',
     'bill-note',
     'trash',
     'bill',
     'scan',
     'content',
     'circle',
     'play',
     'limit',
     'money',
     'link',
     'zoom-in',
     'koubei',
     'location',
     'capslock',
     'time-5',
     'warn',
     'help',
     'close-circle',
     'selected',
     'search',
     'net',
     'chat',
     'contacts',
     'appx',
     'question',
     'person-setting',
     'setting',
     'like',
     'ant',
     'add',
     'more',
     'more-1',
     'zoom-out',
     'money-circle',
     'collect',
     'voice',
     'good',
     'voice-limit',
     'people',
     'person-add',
     'download',
     'sad',
     'left',
     'right',
     'eye-close',
     'eye',
     'koubei_',
     'star_',
     'check',
     'chat_',
     'help_',
     'key_',
     'lock_',
     'people_',
     'voice-limit_',
     'location_',
     'phone_',
     'logo-alipay_',
     'person-delete_',
     'wait_',
     'apps_',
     'microphone_',
     'pen_',
     'close_',
     'question_',
     'down_',
     'certified-check_',
     'certified-warn_',
     'sad_',
     'ant_',
     'time-5_',
     'warn_',
     'person-circle_',
     'time-3_',
     'check_',
     'logo-alipays',
     'like_',
     'home',
     'eye_',
     'edit_',
     'mail_',
     'forbid_',
     'eye-limit_',
     'delete-person_',
     'close',
     'address-book_',
     'person',
     'gift',
     'add-message',
     'alipay',
     'phone-book_',
     'delete_',
     'down',
     'up',
   ],
 },
 onLoad() {},
});

属性

type 有效值

Bug & Tip

• size只需要填写纯数字，默认增加 px 单位，当安装 mini-ali-ui-rpx npm 包后，默认增加rpx 单位，仅仅只是默认增加的单位，具体的 size 将根据所填写的值而显示。比如 size="30"，最终得到的可能就是 30px 或者 30rpx 的结果；
• color 默认为空，可继承父级元素的颜色值；
• am-icon 使用的是 iconfont 方式，如通过 className 方式控制大小，需要通过设置 font-size 来改变；
• 如果设置 size 和 color 属性后无效，那么很大可能就是当前设备 不支持 CSS 自定义属性（CSS 变量），只能通过 className 方式来修改 font-size 和 color 的属性值。