百度智能小程序 图标

icon 图标

解释： 包括天气、系统设置、互动社交、生活服务、书籍影音、政务服务、交通出行 7 个行业类别的图标。请扫描示例二维码查看图标全集。详细设计文档参考图片图标。

属性说明

示例 

在开发者工具中打开

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

<view class="icon-item" s-for="item in list">
    <view class="icon-inner">
        <view><smt-icon name="{{item}}" size="{{iconSize}}" /></view>
        <view class="en-name">{{item}}</view>
    </view>
</view>

Page({
    data: {
        // 更多icon请参看右侧示例的icon全集
        list: ['arrow-left', 'arrow-down', 'arrow', 'arrow-up', 'arrow-bottom-right', 'arrow-top-left']
        iconSize: '39.86rpx'
    }
});

.icon-item {
    display: inline-block;
    width: 25%;
    text-align: center;
    box-sizing: border-box;
}
.icon-item .icon-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    height: 22.94686vw;
    padding: 0 4.23rpx;
    font-size: 0;
}
.icon-item .en-name {
    white-space: normal;
    font-size: 23.55rpx;
    margin-top: 27.17rpx;
}

设计指南

提供 2 种主题的图标，单色线型和多色面型。框架和基础功能类页面可选择单色图标，重点内容分类入口（金刚位）可选择多色图标。

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

<view>
    <smt-icon name="add" color="{{color1}}" />
    <smt-icon name="smart-game-m" size="30px"  color="{{color2}}"/>
</view>

Page({
    data: {
        color1: '#3388ff',
        color2: ['#ffdd52', '#ffc92c', '#ffa808', '#ffa808']
    }
});

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

<view>
    <smt-icon name="add" size="30px" />
    <smt-icon name="add" size="36.232rpx"/>
    <smt-icon name="add" size="6vw" />
</view>