Icon-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

Icons are semantic vector graphics that represent basic operations and provide users with clear, intuitive guidance.

Properties

Property	Type	Required	Default	Description
type	string	Yes	""	The type of the icon.
size	'x-small' \| 'small' \| 'medium' \| 'large' \| 'x-large'	No	"medium"	The size of the icon. Valid values are 'x-small' (16), 'small' (32), 'medium' (48), 'large' (64), and 'x-large' (128).
color	string	No	-	The color of the icon, which is the value of the CSS color property.
fontSize	string	No	-	The size of the icon.
className	string	No	-	The class name.

Events

Event name	Description	Type
onTap	Triggered when the icon is tapped.	`( e: Event ) => void`

Style classes

Class name	Description
amd-icon	Overall style

Code examples

Basic usage

Example of index.axml:

<view class="demo">
  <search-bar placeholder="Search" onInput="handleSearchChange" borderColor="#1677ff" />
  <view class="sum" a:if="{{!searchValue}}">
    There are a total of
    <text>{{iconTypes.length}}</text> icon types
  </view>
  <view class="list-title">
    Outline 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">
    Fill 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>

Example of index.js:

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`,
    });
  },
});

Example of index.acss:

.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;
}

Example of index.json:

{
  "defaultTitle": "Icon",
  "usingComponents": {
    "am-icon": "antd-mini/es/Icon/index",
    "search-bar": "antd-mini/es/SearchBar/index"
  }
}