【微信小程序】简洁好用的icon（94/100）

article/2025/10/1 4:47:56

在这里插入图片描述

布局

<!--pages/icon/icon.wxml-->
<icon class="icon-box-img" type="success" size="50"></icon>
<view class="icon-box-title">成功</view>
<icon class="icon-box-img" type="info" size="50"></icon>
<view class="icon-box-title">提示</view>
<icon class="icon-box-img" type="warn" size="50" color="#C9C9C9"></icon>
<view class="icon-box-title">普通警告</view>
<icon class="icon-box-img" type="warn" size="50"></icon>
<view class="icon-box-title">强烈警告</view><icon class="icon-box-img" type="waiting" size="50"></icon>
<view class="icon-box-title">等待</view><icon class="icon-small" type="success_no_circle" size="23"></icon>
<view class="icon-box-title">多选控件图标_已选择</view><icon class="icon-small" type="circle" size="23"></icon><view class="icon-box-title">多选控件图标_未选择</view><icon class="icon-small" type="warn" size="23"></icon><view class="icon-box-title">错误提示</view><icon class="icon-small" type="success" size="23"></icon><view class="icon-box-title">单选控件图标_已选择</view><icon class="icon-small" type="download" size="23"></icon><view class="icon-box-title">下载</view><icon class="icon-small" type="info_circle" size="23"></icon><view class="icon-box-title">提示</view><icon class="icon-small" type="cancel" size="23"></icon><view class="icon-box-title">停止或关闭</view><icon class="icon-small" type="search" size="14"></icon><view class="icon-box-title">搜索</view>

数据模型：

// pages/icon/icon.js
Page({/*** 页面的初始数据*/data: {iconSize: [20, 30, 40, 50, 60, 70],iconColor: ['red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear']},