怎样去引入第三方图标iconfont呢

一·背景

小程序内置icon图标较少，引入image图片 影响小程序体积。使用组件形式易复用，方便使用。
二·选择图标

·基于阿里巴巴矢量图标库的一篇教程，
2·进入网站登录账户后，新建一个项目

在该网站选择一些自己要用到的图标如上图点击购物车按钮添加到购物车。
3·把购物车添加的图标添加至自己新建的项目如下图

4·然后在下图，图标管理，我的项目里找到你项目所添加的图标。

5·除了从该网站选择你要用到的图标外还可以点击上图右上角处自己上传svg格式图标到阿里矢量库。（ 官方推荐 使用 adobe illustrator 设计图标并提供了ai模板）
6·点击更多操作对该项目进行一些设置如下图：

输入图标前缀为了不和element ui 的图标冲突 所以在 原有的el-icon后面加上自己的项目名称。然后设置 font family 点击保存
7·点击下载到本地 会下载一个download.zip 解压后 打开文件夹大致如下图：

三·小程序创建图标组件

1·小程序内 新建一个 一级目录 我这里 取名叫 dist 用于存放自定义的组件

2·在dist 目录下 新建组件 目录如下 dist/tb-icon

3·tb-icon 里的file存放的是在iconfont上下下载并解压后的压缩包（放不放无所谓）
4·组件内容 代码分别如下：
index.js

'use strict';


Component({
  properties: {
    type: {
      type: String,
      value: ''
    }
  }
});
index.json

{
  "component": true
}


index.wxml

index.wxss 的内容 为在 iconfont内下载的iconfont.css的内容 大致如下

@font-face {font-family: "tiebazs";
  src: url('iconfont.eot?t=1532141644749'); /* IE9*/
  src: url('iconfont.eot?t=1532141644749#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf
  url('iconfont.ttf?t=1532141644749') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1532141644749#tiebazs') format('svg'); /* iOS 4.1- */
}




.tiebazs-baidufangxing:before { content: "e603"; }


.tiebazs-pic:before { content: "e69b"; }


.tiebazs-rectangle390:before { content: "e604"; }
注意index.wxss 内 我删除了一段 控制 图标大小 样式的代码，这段代码写在index.wxss是全局全局引用样式的。我们在引用图标组件的页面 单独去设置 更灵活一些。到此 编写图标组件完毕。

四·小程序引入图标组件

1·引入组件页面myUserInfo.Json：

{
  "navigationBarTitleText": "我的",
  "usingComponents": {
    "tb-icon": "../../dist/tb-icon/index"
  }
}


2·引入页面myUserInfo.wxss

tb-icon{
  padding: 2px;
  color: #55CAC4;
  font-family:"tiebazs" !important;
  font-size:22px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


3·引入页面 myUserInfo.wxml

type填写的是 iconfont 上的class name ，原来是 tiebazs-xiufubuding 我们这里只需要 写 xiufubuding 即可，因为我们在定义组件的时候 已经加上前缀了 class=”tiebazs tiebazs-{{ type }}”
4·效果图

5·结束