1 官方自带

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

icon 官方地址 https://developers./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 自定义添加

阿里巴巴矢量图标库 地址 /

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

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

可以去掉多余的 iconfont

是不是很神奇