自定义icon

1、新建组件文件icon

2、在icon.js文件中定义属性

Component({
    
    
    properties: {
    
    
        //标签名字
        name:String,
        //颜色
        color:{
    
    
            type:String, //颜色值，类型
            value:"#FBC02D"
        },
        //大小
        size:{
    
    
            type:String, //大小类型
            value:"34"
        }
    },
    data: {
    
    },
    methods: {
    
    }
});
});

3、在icon.wxml文件中使用

其中name、size、color对应icon.js中的name、size、color

<view class="iconfont icon-{
     
     {name}}"
      style="font-size:{ 
        { 
        size}}rpx;color:{ 
        { 
        color}};margin-right:20rpx"></view>

4、在icon.wxss导入图标文件

在根目录下新建iconfont文件夹，新建index.wxss文件（文件内容是在阿里icon中生成的，也可以是其他平台）

@import "../../iconfont/index.wxss";

5、使用

• 首先在json文件中对组件进行配置

{
    
    
  "component": true,
  "usingComponents": {
    
    
    "i-icon": "../icon/icon"
  }
}

• 在wxml代码中使用

<i-icon name="biaoqian" color="#F27013"></i-icon>

6、另外，因为icon文件在大多数文件中都有使用，因此可以配置成全局的。

这样可以避免重复多次声明

......
 "usingComponents": {
    
    
    "i-icon": "/components/icon/icon"
  }