title: icon 图标 header: develop nav: component sidebar: base_icon

webUrl: https://qft12m.smartapps.cn/component/icon/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图标

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/icon/icon - 图1 请使用百度APP扫码

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

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">自定义icon类型</view>
  4.         <view class="icon-area">
  5.             <view class="icon-item" s-for="type in types.smallDefault">
  6.                 <icon type="{{type}}"/>
  7.                 <view class="icon-text"> {{type}}</view>
  8.             </view>
  9.         </view>
  10.     </view>
  11. </view>
  1. Page({
  2.     data: {
  3.         types: {
  4.             smallDefault: ['success', 'info', 'warn', 'waiting',
  5.             'success_no_circle', 'clear', 'search', 'personal',
  6.             'setting', 'top', 'close', 'cancel', 'download',
  7.             'checkboxSelected', 'radioSelected', 'radioUnselect']
  8.         }
  9.     }
  10. });
  1. .icon-area {
  2.     margin-top: .15rem;
  3. }
  5. .icon-item {
  6.     display: inline-block;
  7.     flex-direction: column;
  8.     justify-content: center;
  9.     text-align: center;
  10.     width: .8rem;
  11.     height: .95rem;
  12.     margin: .07rem;
  13. }
  15. .icon-text {
  16.     margin-top: .15rem;
  17.     width: .8rem;
  18.     word-break: break-all;
  19. }

:::

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

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">自定义icon大小</view>
  4.         <view class="icon-area">
  5.             <view s-for="size in sizes" class="icon-item">
  6.                 <icon type="success" size="{{size}}"/>
  7.                 <view class="icon-text">{{size}}px</view>
  8.             </view>
  9.         </view>
  10.     </view>
  11. </view>
  1. Page({
  2.     data: {
  3.         colors: [
  4.             '#333', '#666', '#999', '#3C76FF', '#F7534F'
  5.         ]
  6.     }
  7. });
  1. .icon-area {
  2.     margin-top: .15rem;
  3. }
  5. .icon-item {
  6.     display: inline-block;
  7.     flex-direction: column;
  8.     justify-content: center;
  9.     text-align: center;
  10.     width: .8rem;
  11.     height: .95rem;
  12.     margin: .07rem;
  13. }
  15. .icon-text {
  16.     margin-top: .15rem;
  17.     width: .8rem;
  18.     word-break: break-all;
  19. }

:::

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

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">自定义icon颜色</view>
  4.         <view class="icon-area">
  5.             <view class="icon-item" s-for="color in colors">
  6.                 <icon type="success" size="25" color="{{color}}" class="icon-color" />
  7.                 <view class="icon-text">{{color}}</view>
  8.             </view>
  9.         </view>
  10.     </view>
  11. </view>
  1. Page({
  2.     data: {
  3.         sizes: [
  4.             40, 35, 30, 25
  5.         ]
  6.     }
  7. });
  1. .icon-area {
  2.     margin-top: .15rem;
  3. }
  5. .icon-item {
  6.     display: inline-block;
  7.     flex-direction: column;
  8.     justify-content: center;
  9.     text-align: center;
  10.     width: .8rem;
  11.     height: .95rem;
  12.     margin: .07rem;
  13. }
  15. .icon-text {
  16.     margin-top: .15rem;
  17.     width: .8rem;
  18.     word-break: break-all;
  19. }

:::