icon

基础库 1.0.0 开始支持本组件

图标。

属性说明

效果示例

代码示例

<view class="ttui-flex icon-line" tt:for="{{icons}}" tt:for-item="iconline">
  <view
    class="ttui-flex__item icon-single-wrapper"
    tt:for="{{iconline}}"
    tt:for-item="icon"
  >
    <label>
      <icon class="tt-icon" type="{{icon}}"></icon>
      {{icon}}
    </label>
  </view>
</view>

<view class="icon-wrapper" tt:for="{{sizes}}">
  <icon class="tt-icon" size="{{item}}" type="success"></icon>
  <view class="icon-size">{{item}}</view>
</view>

<view class="icon-wrapper" tt:for="{{colors}}">
  <icon class="tt-icon" size="36" color="{{item}}" type="success"></icon>
</view>

// page.js
Page({
  data: {
    icons: [
      ["success", "success_no_circle"],
      ["info", "warn"],
      ["waiting", "clear"],
      ["cancel", "download"],
      ["search"]
    ],
    sizes: [66, 48, 36, 24],
    colors: ["#222222", "#CACACA", "", "#50ABF9"]
  }
});