icon 图标
- 属性说明
  - type 有效值
- 示例

icon 图标

解释：图标设计资源下载。如需更多图标样式，可使用 Smart UI 组件，详见 icon 图标。

属性说明

属性名	类型	默认值	必填	说明
type	String		是	生效的值见下表 type 有效值
size	Number	23	否	icon 的大小（单位：px）
color	Color		否	icon 的颜色

type 有效值

值	说明
success	成功图标
info	消息图标
warn	警告图标
waiting	等待图标
success_no_circle	无圆形边框成功图标
clear	删除图标
search	搜索图标
personal	人物图标
setting	设置图标
top	回到顶部图标
close	关闭图标
cancel	取消图标
download	下载图标
checkboxSelected	复选框选中图标
radioSelected	单选框选中图标
radioUnselect	单选框未选中图标
loadingGrey	loading 图标

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

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

SWAN
JS
CSS

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

设计指南

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

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

SWAN
JS
CSS

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

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

SWAN
JS
CSS

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

设计指南

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

正确

错误