custom icon

1. Create a new component file icon

2. Define attributes in the icon.js file

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

3. Use in the icon.wxml file

The name, size, and color correspond to the name, size, and color in icon.js

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

4. Import the icon file in icon.wxss

Create a new iconfont folder in the root directory, and create a new index.wxss file (the content of the file is generated in Ali icon, or it can be other platforms)

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

5. use

• First configure the component in the json file

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

• Use in wxml code

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

6. In addition, because the icon file is used in most files, it can be configured globally.

This avoids repeating the statement multiple times

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