小程序引入icon的三种方式

小程序引入icon的三种方式（原生图标、WeUI图标组件、iconfont图标）

原生图标

小程序里原生图标是通过icon标签来引入的：
<icon type="success" size="24" color="green" />

WeUI图标组件

WeUI 是一套同微信原生视觉体验一致的基础样式库，基于小程序自定义组件构建，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。要使用WeUI组件，我们需要到组件下载页面去下载icon组件。WeUI组件库

下载完成后我们会得到一个icon文件夹，里面有四个文件：icon.js, icon.json, icon.wxml,icon.wxss，我们在项目根目录下创建一个components文件夹，再将icon文件夹拷贝进去，然后在app.json中增加以下配置：

"usingComponents": {
  "mp-icon": "components/icon/icon"
},

示例代码：

<!--WXML示例代码-->
<mp-icon type="field" icon="add" color="black" size="{{25}}"></mp-icon>
<mp-icon icon="add" color="black" size="{{25}}"></mp-icon>

效果图：
组件库里icon图标列表参考链接。

iconfont图标

从阿里的图标库下载需要的图标。

解压下载下来的download.zip文件，将其中的iconfont.css文件拷贝到小程序中，重命名为iconfont.wxss,打开iconfont.wxss文件：

由于小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64。打开Online @font-face generator 上传字体,选择base64编码,Convert后下载。
将下载好的文件夹中stylesheet.css样式表中的内容拷贝, 粘贴至小程序的iconfont.css文件中,替换@font-face。

打开app.wxss,在首行引入iconfont.wxss(./styles/iconfont.wxss为 文件的路径)：

/**app.wxss**/
@import './styles/iconfont.wxss';

在视图文件中，我们通过以下方式显示图标：
<icon class="iconfont icon-shezhi" />
效果图：