An icon is a semantic vector graphic to metaphorically present the basic functionalities and provide users with correct, friendly, and clear guidance.
Property
Property | Type | Required | Default value | Description |
type | string | Yes | "" | The type of the icon. |
size | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | No | "medium" | The size of icon, x-small (16), small (32), medium (48), large (64), x-large (128). |
color | string | No | - | The color of the icon, which is the same as the value of the color attribute in CSS. |
fontSize | string | No | - | The icon size. |
className | string | No | - | The class name. |
Event
Event name | Description | Type |
onTap | Callback fired when the icon is tapped. |
|
Style class
Class name | Description |
amd-icon | The style of the entire icon. |
Code sample
Basic usage
The following shows an example of the code in the index.axml file:
<view class="demo">
<search-bar placeholder="search" onInput="handleSearchChange" borderColor="#1677ff" />
<view class="sum" a:if="{{!searchValue}}">
There are currently
<text>{{iconTypes.length}}</text>icon types
</view>
<view class="list-title">
wireframe style
</view>
<view class="icon-list">
<view class="icon-item" a:for="{{iconTypes}}" a:if="{{item.indexOf('Outline') > 1&&item.toUpperCase().indexOf(searchValue.toUpperCase())>-1}}">
<view class="icon-item-wrapper" onTap="handleClickIcon" data-info="{{item}}">
<am-icon type="{{item}}" color="#1677ff" size="small" />
<text class="icon-desc">{{item}}</text>
</view>
</view>
</view>
<view class="list-title">
solid style
</view>
<view class="icon-list">
<view class="icon-item" a:for="{{iconTypes}}" a:if="{{item.indexOf('Fill') > 1&&item.toUpperCase().indexOf(searchValue.toUpperCase())>-1}}">
<view class="icon-item-wrapper" onTap="handleClickIcon" data-info="{{item}}">
<am-icon type="{{item}}" color="#1677ff" size="small" onTap="handleClickIcon" data-info="{{item}}" />
<text class="icon-desc">{{item}}</text>
</view>
</view>
</view>
</view>The following shows an example of the code in the index.js file:
Page({
data: {
iconTypes: [
'MinusOutline',
'AlipayCircleFill',
'CheckCircleFill',
'FireFill',
'FaceRecognitionOutline',
'StarFill',
'EyeInvisibleFill',
'SmileFill',
'FrownFill',
'BankcardOutline',
'HeartOutline',
'EyeFill',
'HeartFill',
'DownFill',
'CloseCircleFill',
'VideoOutline',
'CouponOutline',
'ReceiptOutline',
'AntOutline',
'UserCircleOutline',
'PayCircleOutline',
'BillOutline',
'PlayOutline',
'PayOutline',
'MoreOutline',
'ShrinkOutline',
'ArrowsAltOutline',
'StarOutline',
'CheckOutline',
'DeleteOutline',
'LinkOutline',
'InformationCircleOutline',
'GlobalOutline',
'InformationCircleFill',
'ExclamationCircleFill',
'CheckCircleOutline',
'CloseCircleOutline',
'SetOutline',
'QuestionCircleFill',
'QuestionCircleOutline',
'UpCircleOutline',
'FrownOutline',
'DownCircleOutline',
'ExclamationCircleOutline',
'MinusCircleOutline',
'RedoOutline',
'UndoOutline',
'EyeInvisibleOutline',
'ForbidFill',
'PicturesOutline',
'PictureOutline',
'PictureWrongOutline',
'EyeOutline',
'AddCircleOutline',
'ClockCircleFill',
'ClockCircleOutline',
'BellMuteOutline',
'KeyOutline',
'BellOutline',
'SearchOutline',
'CollectMoneyOutline',
'UnorderedListOutline',
'AppstoreOutline',
'ExclamationTriangleOutline',
'AddOutline',
'ScanningOutline',
'ScanCodeOutline',
'ExclamationOutline',
'CloseOutline',
'ScanningFaceOutline',
'LeftOutline',
'DownOutline',
'UpOutline',
'RightOutline',
'KoubeiOutline',
'KoubeiFill',
'AAOutline',
'ArrowDownCircleOutline',
'MovieOutline',
'CompassOutline',
'LoopOutline',
'TextOutline',
'TagOutline',
'FlagOutline',
'EnvironmentOutline',
'CalendarOutline',
'LocationFill',
'PhoneFill',
'PhonebookOutline',
'SmileOutline',
'UserAddOutline',
'FileWrongOutline',
'SoundMuteFill',
'SoundMuteOutline',
'LockOutline',
'UnlockOutline',
'EditSOutline',
'UploadOutline',
'SoundOutline',
'DownlandOutline',
'SendOutline',
'FillinOutline',
'AudioMutedOutline',
'AudioOutline',
'UserOutline',
'UserContactOutline',
'TeamOutline',
'UserSetOutline',
'FileOutline',
'MailOutline',
'TruckOutline',
'MailOpenOutline',
'ChatCheckOutline',
'ChatAddOutline',
'ChatWrongOutline',
'PhonebookFill',
'AddressBookFill',
'CalculatorOutline',
'PieOutline',
'HandPayCircleOutline',
'GiftOutline',
'TransportQRcodeOutline',
'FolderOutline',
'AlipaySquareFill',
'TravelOutline',
'AppOutline',
'HistogramOutline',
'MailFill',
'CameraOutline',
'EditFill',
'SystemQRcodeOutline',
'LockFill',
'AudioFill',
'TeamFill',
'FilterOutline',
'EditSFill',
'LikeOutline',
'TextDeletionOutline',
'StopOutline',
'FingerdownOutline',
'MessageFill',
'LocationOutline',
'ContentOutline',
'ExclamationShieldFill',
'ReceivePaymentOutline',
'ExclamationShieldOutline',
'AddSquareOutline',
'CloseShieldOutline',
'CheckShieldOutline',
'CheckShieldFill',
'ShopbagOutline',
'MessageOutline',
],
searchValue: '',
},
handleSearchChange(value) {
this.setData({ searchValue: value });
},
handleClickIcon(e) {
const { info } = e.target.dataset;
top.postMessage({ iconType: info }, '*');
my.showToast({
content: `${info} Copied to clipboard`,
});
},
});The following shows an example of the code in the index.acss file:
.demo {
background: #fff;
}
.sum {
padding: 24rpx;
}
.sum>text {
color: red;
}
.list-title {
color: red;
font-size: 32rpx;
font-weight: bold;
padding: 24rpx;
}
.icon-list {
display: flex;
flex-wrap: wrap;
padding: 24rpx;
background: #fff;
}
.icon-item {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
flex: 0 33.33333%;
height: 170rpx;
padding: 16rpx;
border: 1rpx solid #eee;
box-sizing: border-box;
}
.icon-desc {
flex: 0 100%;
margin-top: 24rpx;
font-size: 24rpx;
text-align: center;
word-wrap: break-word;
word-break: break-all;
}
.icon-item-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}The following shows an example of the code in the index.json file:
{
"defaultTitle": "Icon",
"usingComponents": {
"am-icon": "antd-mini/es/Icon/index",
"search-bar": "antd-mini/es/SearchBar/index"
}
}