图标（Icon）

属性

事件

样式类

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo">
  <search-bar placeholder="搜索" onInput="handleSearchChange" borderColor="#1677ff" />
  <view class="sum" a:if="{{!searchValue}}">
    目前共有
    <text>{{iconTypes.length}}</text>个图标类型
  </view>
  <view class="list-title">
    线框风格
  </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">
    实底风格
  </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>

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} 已复制到剪贴板`,
    });
  },
});

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

index.json 的代码示例如下：

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