原生微信小程序如何动态修改svg图片颜色及尺寸、宽高（封装svgIcon组件）

最终效果

前言

动态设置Svg图片颜色就是修改Svg源码的path中的fill属性，

通过wx.getFileSystemManager().readFile读取.xlsx文件

把文件转成base64

封装svg-icon组件

1、在项目的components下新建svg-icon文件夹，新增base64.js文件

class Base64 {
   
  constructor() {
   

  }
  _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

  encode(input) {
   
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
    input = this._utf8_encode(input);

    while (i < input.length) {
   

      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);

      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;

      if (isNaN(chr2)) {
   
        enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
   
        enc4 = 64;
      }

      output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

    }

    return output;
  };
  // public method for decoding
  decode(input) {
   
    var output = "";
    var chr1, chr2, chr3;
    var enc1, enc2, enc3, enc4;
    var i = 0;

    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

    while (i < input.length) {
   

      enc1 = this._keyStr.indexOf(input.charAt(i++));
      enc2 = this._keyStr.indexOf(input.charAt(i++));
      enc3 = this._keyStr.indexOf(input.charAt(i++));
      enc4 = this._keyStr.indexOf(input.charAt(i++));

      chr1 = (enc1 << 2) | (enc2 >> 4);
      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
      chr3 = ((enc3 & 3) << 6) | enc4;

      output = output + String.fromCharCode(chr1);

      if (enc3 != 64) {
   
        output = output + String.fromCharCode(chr2);
      }
      if (enc4 != 64) {
   
        output = output + String.fromCharCode(chr3);
      }

    }

    output = this._utf8_decode(output);

    return output;
  };

  // private method for UTF-8 encoding
  _utf8_encode(string) {
   
    string = string.replace(/\r\n/g, "\n");
    var utftext = "";

    for (var n = 0; n < string.length; n++) {
   

      var c = string.charCodeAt(n);

      if (c < 128) {
   
        utftext += String.fromCharCode(c);
      } else if ((c > 127) && (c < 2048)) {
   
        utftext += String.fromCharCode((c >> 6) | 192);
        utftext += String.fromCharCode((c & 63) | 128);
      } else {
   
        utftext += String.fromCharCode((c >> 12) | 224);
        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
        utftext += String.fromCharCode((c & 63) | 128);
      }

    }

    return utftext;
  };

  // private method for UTF-8 decoding
  _utf8_decode(utftext) {
   
    var string = "";
    var i = 0;
    var c = 0;
    var c1 = 0;
    var c2 = 0;

    while (i < utftext.length) {
   

      c = utftext.charCodeAt(i);

      if (c < 128) {
   
        string += String.fromCharCode(c);
        i++;
      } else if ((c > 191) && (c < 224)) {
   
        c2 = utftext.charCodeAt(i + 1);
        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
        i += 2;
      } else {
   
        c2 = utftext.charCodeAt(i + 1);
        c3 = utftext.charCodeAt(i + 2);
        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
        i += 3;
      }

    }

    return string;
  }
}

export {
   
  Base64
}

2、在项目的components下新建svg-icon文件夹，新增index.js文件

// component/svg.js
const fs = wx.getFileSystemManager()

import {
    Base64 } from './base64.js';
const base64 = new Base64()

Component({
   
  properties: {
   
  // svg图片路径
    src: {
   
      type: String,
      value: ''
    },
    // svg颜色
    color: {
   
      type: String,
      value: ''
    },
    // svg宽度
    width: {
   
      type: String,
      value: '60rpx'
    },
    // svg高度
    height: {
   
      type: String,
      value: '60rpx'
    }
  },

  observers: {
   
    'src,color': function (src, color) {
   
      this.getSvgFile(src, color)
    }
  },
  data: {
   
    svgData: ''
  },
  methods: {
   
    getSvgFile(src, color) {
   
      let that = this;
      fs.readFile({
   
        filePath: src,
        encoding: 'UTF-8',
        position: 0,
        success(res) {
   
          let sourceFile = res.data;
          let newFile = that.changeColor(sourceFile, color);
          let svgBase64File = base64.encode(newFile);
          that.setData({
   
            svgData: 'data:image/svg+xml;base64,' + svgBase64File
          })
        },
        fail(res) {
   
          console.error(res)
        }
      })
    },

    changeColor(sourceFile, color) {
   
      let newSvg;
      if (/fill=".*?"/.test(sourceFile)) {
   
        newSvg = sourceFile.replace(/fill=".*?"/g, `fill="${
     color}"`);  // SVG有默认色
      } else {
   
        newSvg = sourceFile.replace(/<svg /g, `<svg fill="${
     color}" `); // 无默认色
      }
      return newSvg
    }
  }
})

3、在项目的components下新建svg-icon文件夹，新增index.json文件

{
   
  "component": true,
  "usingComponents": {
   }
}

4、在项目的components下新建svg-icon文件夹，新增index.wxml文件

<block wx:if="{
    {svgData}}">
  <image style="width: { { width}};height: { { height}};" src="{
    {svgData}}"></image>
</block>

使用svg-icon组件

1、在使用的页面引入组件（即在json文件中引入）

{
   
  "usingComponents": {
   
    "svg-icon": "/components/svg-icon/index"
  }
}

2、在wxml文件中如下使用即可

<svg-icon src="/assets/imgs/userCenter/wocwin.svg" color="#3fb65f" />

相关文章

基于ElementUi再次封装基础组件文档

基于ant-design-vue再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档