支付寶小程序其他手勢 圖標·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 的屬性值。