字节跳动小程序开发组件文档 icon

图标。

示例

开发者工具中预览

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