微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件

一、通过阿里图标库生成iconfont.wxss

1、登录阿里图标库官网https://www.iconfont.cn/，新建一个项目，例如我新建的项目是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" />

Icon 参数

属性	说明	类型	默认值
type	图标的名称	String	-
size	图标的大小，单位是 px	Number	-
color	图标的颜色	String	-
custom	自定义图标	String	-