百度智能小程序 图标

icon 图标

解释： 图标 设计资源下载

属性说明

type 有效值

示例 

在开发者工具中打开

代码示例 1： 自定义 icon 类型

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">自定义icon类型</view>
        <view class="icon-area">
            <view class="icon-item" s-for="type in types.smallDefault">
                <icon type="{{type}}"/>
                <view class="icon-text"> {{type}}</view>
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        types: {
            smallDefault: ['success', 'info', 'warn', 'waiting',
            'success_no_circle', 'clear', 'search', 'personal',
            'setting', 'top', 'close', 'cancel', 'download',
            'checkboxSelected', 'radioSelected', 'radioUnselect']
        }
    }
});

.icon-area {
    margin-top: .15rem;
}

.icon-item {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: .8rem;
    height: .95rem;
    margin: .07rem;
}

.icon-text {
    margin-top: .15rem;
    width: .8rem;
    word-break: break-all;
}

设计指南

根据使用场景选择适用的 icon 类型：功能类图标通常用于辅助文案内容，用于功能入口处；状态类图标通常用来展现当前状态。

代码示例 2： 自定义 icon 大小

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">自定义icon大小</view>
        <view class="icon-area">
            <view s-for="size in sizes" class="icon-item">
                <icon type="success" size="{{size}}"/>
                <view class="icon-text">{{size}}px</view>
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        sizes: [
            40, 34, 30, 24, 22, 18, 16
        ]
    }
});

.icon-area {
    margin-top: .15rem;
}

.icon-item {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: .8rem;
    height: .95rem;
    margin: .07rem;
}

.icon-text {
    margin-top: .15rem;
    width: .8rem;
    word-break: break-all;
}

代码示例 3： 自定义 icon 颜色

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">自定义icon颜色</view>
        <view class="icon-area">
            <view class="icon-item" s-for="color in colors">
                <icon type="success" size="25" color="{{color}}" class="icon-color" />
                <view class="icon-text">{{color}}</view>
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        colors: [
            '#3388FF', '#F7534F', '#FF6600', '#000000'
        ]
    }
});

.icon-area {
    margin-top: .15rem;
}

.icon-item {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: .8rem;
    height: .95rem;
    margin: .07rem;
}

.icon-text {
    margin-top: .15rem;
    width: .8rem;
    word-break: break-all;
}

设计指南

请根据当前的语义选择合适的 icon 颜色，如红色通常表示警示，请谨慎使用。