AMIcon
Icon.
Note:
• It is recommended to use font with small size.
• The Amicon does not support the onTap event, while a view tag can be added to its exterior.
• AMIcon is the extension component encapsulated with customized components where no click event is available.
The click event bound on it will not work. It is possible to find the source codes in modules, and modify the code to add the click event.
Sample Code
// API-DEMO page/component/am-icon/am-icon.json
{
"defaultTitle": "Mini Program AntUI component library",
"usingComponents": {
"am-icon": "mini-antui/es/am-icon/index"
}
} <!-- API-DEMO page/component/am-icon/am-icon.axml -->
<view>
<view class="icon-title">Basics </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">Outline style</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">Solid style</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;
}Attributes
Property | Description | Type | Required |
type | Type of the icon. For specific effect, scan the above QR code to preview (effective values are listed in the table below). | String | Yes |
size | Size of icon, in px. | String | No |
color | Color of icon, same as the color in css. | String | No |
Effective |values of type
Style of icon | Effective values of type |
Basic type | arrow-left, arrow-up, arrow-right, arrow-down, cross, plus. |
Outline style | 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, 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. |
Solid style | close, dislike, heart, help, like, location, info, success, wait, warning, star. |