icon 图标

解释: 图标

# 属性说明

属性名 类型 默认值 必填 说明
type String 生效的值:success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect, loadingGrey
size Number 23 icon 的大小,单位是 px
color Color icon 的颜色,同 css 的 color

# type 有效值

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

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

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

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