icon 图标

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

# 属性说明

属性名 类型 必填 默认值 说明
name String icon 的英文名称
color String, Array.<String> icon 的颜色,多色图标支持传入色值的数组
size String 25px icon 的尺寸,必须包含单位(px, rpx, vw, vh, %, em 等)

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例 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;
    }
    

    设计指南

    DESIGN

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