1 官方自带

样式基于 v2 “style”: “v2”, app.json设置的v2，删除这个就没有呢

icon 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

<view class="cu-list grid col-3"><view class="cu-item" wx:for="{{iconType}}" wx:key="*this"><icon type="{{item}}" size="45"></icon><text class="text-bold">{{item}}</text></view>
</view>

iconType:['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'],

type一共有9个

在这里插入图片描述

2 自定义添加

阿里巴巴矢量图标库地址 https://www.iconfont.cn/

2.1 使用

比如：我搜索爱心
在这里插入图片描述
选择点击购物车

点击右上方的购物车

添加至项目

我随便选择一个 demo项目，然后点确认

2.2 管理自己图标

点对应项目demo
在这里插入图片描述
代码方式这边目前用的是 Font class

点查看代码链接
然后点此生成代码

双击这里，跳入这个页面
在这里插入图片描述
复制下来

2.3 在小程序使用

粘贴到 wxss文件中

在wxml 页面引用

<view class="iconfont iconxiai"></view>

在这里插入图片描述
目前，整个引用完毕，是不是很简单

2.4 进行简单的优化

由于写class 要同时写2个 iconfont iconxiai 比较麻烦，我们进行优化一下！

添加这个代码

[class*="icon"] { font-family: "iconfont";font-size: inherit;/*继承父级*/font-style: normal;-webkit-font-smoothing: antialiased;/*抗锯齿，字体清晰*/-moz-osx-font-smoothing: grayscale;/*抗锯齿，比较清晰*/
}

解释：
font-family: 这个参数来自 @font-face中的 font-family中的 iconfont
font-size：参数 inherit 继承父级

应用是简单一个 icon xiai