AMIcon 图标

图标。

注意：

• 建议使用体积较小的字体。
• Amicon不支持 onTap 事件，可以在外层加一个 view 标签。
• AMIcon 是自定义组件封装的扩展组件，上面没有提供点击事件；自行绑定一个点击事件，不会生效，可以到 modules 里面找到源码，修改源码来新增点击事件。

扫码体验

示例代码

// API-DEMO page/component/am-icon/am-icon.json
{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "am-icon": "mini-antui/es/am-icon/index"
  }
}

<!-- API-DEMO page/component/am-icon/am-icon.axml -->
<view>
  <view class="icon-title">基础</view>
  <view class="icon-list">
    <block a:for="{{basicTypes}}">
      <view class="icon-item">
        <am-icon type="{{item}}" />
        <text class="icon-desc">{{item}}</text>
      </view>
    </block>
  </view>
  <view class="icon-title">描边风格</view>
  <view class="icon-list">
    <block a:for="{{strokeTypes}}">
      <view class="icon-item">
        <am-icon type="{{item}}" />
        <text class="icon-desc">{{item}}</text>
      </view>
    </block>
  </view>
  <view class="icon-title">实心风格</view>
  <view class="icon-list">
    <block a:for="{{solidTypes}}">
      <view class="icon-item">
        <am-icon type="{{item}}" />
        <text class="icon-desc">{{item}}</text>
      </view>
    </block>
  </view>
</view>

// API-DEMO page/component/am-icom/am-icon.js
Page({
  data: {
    basicTypes: [
      'arrow-left',
      'arrow-up',
      'arrow-right',
      'arrow-down',
      'cross',
      'plus',
    ],
    strokeTypes: [
      'close-o',
      'dislike-o',
      'heart-o',
      'help-o',
      'like-o',
      'location-o',
      'info-o',
      'success-o',
      'wait-o',
      'warning-o',
      'star-o',
      'download',
      'friends',
      'circle',
      'delete',
      'charge',
      'card',
      'notice',
      'qrcode',
      'reload',
      'scan',
      'money',
      'search',
      'setting',
      'share',
      'zoom-in',
      'zoom-out',
    ],
    solidTypes: [
      'close',
      'dislike',
      'heart',
      'help',
      'like',
      'location',
      'info',
      'success',
      'wait',
      'warning',
      'star',
    ],
  },
});

/* API-DEMO page/component/am-icon/am-icon.acss */
.icon-title {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 10px;
  color: #333;
  font-size: 16px;
}

.icon-list {
  background: #fff;
}

.icon-item {
  display: inline-flex;
  width: 33.33333%;
  height: 80px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.icon-desc {
  margin-top: 10px;
}

属性

type 有效值