一、通过阿里图标库生成iconfont.wxss
1、登录阿里图标库官网/，新建一个项目，例如我新建的项目是my-icon
2、把需要的图标加入购物车，然后再添加到项目里
3、打开项目，选择“Font class”类型，点击下载至本地
二、创建icon组件
1、新建my-icon文件夹，用来保存组件。在my-icon文件夹下分别创建以下4个文件：
index.json
index.wxml
index.js
index.wxss
2、在index.json里面添加"component":true，作用是声明这一组文件为自定义组件
三、编写icon组件代码
index.wxml
<view class="my-class my-icon {{ type === '' ? '' : 'icon-' + type }} {{ custom }}" style="font-size: {{ size }}px; {{ color ? 'color:' + color : '' }}"></view>
index.js
Component({externalClasses: ['my-class'],properties: {type: {type: String,value: ''},custom: {type: String,value: ''},size: {type: Number,value: 14},color: {type: String,value: ''}}});
四、编辑index.wxss
1、把前面阿里图标库下载的iconfont.css的代码全部复制到index.wxss里
2、在index.wxss新加一个my-icon样式，代码如下：
.my-icon{display: inline-block;font-family: iconfont;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;text-rendering: auto;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;vertical-align: middle;}
五、使用icon组件
1、在要使用的页面引入组件，也可以直接在app.json里公共引用
"usingComponents": {"my-icon": "../../mydist/my-icon/index"},
2、view上直接调用组件
<i-icon type="qiche" size="22" color="#666" />
