AMIcon

2021-07-21 11:23

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

copy

	// API-DEMO page/component/am-icon/am-icon.json
	{
	  "defaultTitle": "Mini Program AntUI component library",
	  "usingComponents": {
	    "am-icon": "mini-antui/es/am-icon/index"
	  }
	}

copy

	<!-- 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>

copy

	// 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',
	    ],
	  },
	});

copy

	/* 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.