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

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

1、登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon

2、把需要的图标加入购物车,然后再添加到项目里

微信小程序使用阿里图标库(iconfont)封装自定义的icon图标组件_第1张图片

3、打开项目,选择“Font class” 类型,点击下载至本地

微信小程序使用阿里图标库(iconfont)封装自定义的icon图标组件_第2张图片

二、创建icon组件

1、新建my-icon文件夹,用来保存组件。在my-icon文件夹下分别创建以下4个文件:

index.json

index.wxml

index.js

index.wxss

 微信小程序使用阿里图标库(iconfont)封装自定义的icon图标组件_第3张图片

2、在index.json里面添加 "component":true ,作用是声明这一组文件为自定义组件

微信小程序使用阿里图标库(iconfont)封装自定义的icon图标组件_第4张图片

三、编写icon组件代码

index.wxml

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上直接调用组件


微信小程序使用阿里图标库(iconfont)封装自定义的icon图标组件_第5张图片

Icon 参数

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

你可能感兴趣的:(wechat)