源码路径：E:\微信小程序\svg

svg.js

// component/svg.js

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

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        src: {
            type: String,
            value: ''
    },
    defaultColor:{
      type:String,
      value:'#165DFF'
    },
        color: {
            type: String,
            value: '#000000'
        },
        width: {
            type: String,
            value: '40rpx'
        },
        height: {
            type: String,
            value: '40rpx'
        }
    },

    observers: {
        'src,color': function (src, color) {
            this.getSvgFile(src, color)
        }
    },
    /**
     * 组件的初始数据
     */
    data: {
        svgData: ''
    },

    /**
     * 组件的方法列表
     */
    methods: {
        getSvgFile(src, color) {
      let that = this;
      wx.request({
        url: src,
        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
                    })
        }
      })
        },

        changeColor(sourceFile, color) {
      let newSvg;
      let defaultColor = this.data.defaultColor;
      let regex = new RegExp('fill="' + defaultColor +'"', 'g');
      newSvg = sourceFile.replace(regex, `fill="${color}"`); 

      regex = new RegExp('stroke="' + defaultColor +'"', 'g');
      newSvg = newSvg.replace(regex, `stroke="${color}"`); 
            return newSvg
        }
    }
})

svg.wxml

<image style="width: {{width}};height: {{height}};" src="%7B%7BsvgData%7D%7D"></image>

svg.json

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

使用svg组件

index.js

const app = getApp()

Page({
  data: {
        icon:'https://im.n8y.cn/order_active.svg',
        color:'#00FF00'
  },
  onLoad() {
  },
  changeColor(){
    this.setData({
      icon:'https://im.n8y.cn/goods_active.svg',
      color:"red",
    });
  }

})

index.wxml

<view>
    <svg width="180rpx" height="180rpx" color="{{color}}" src="%7B%7Bicon%7D%7D"></svg>
  <button bindtap="changeColor">更新color</button>
</view>

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 > 2;
      enc2 = ((chr1 & 3) > 4);
      enc3 = ((chr2 & 15) > 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 > 4);
      chr2 = ((enc2 & 15) > 2);
      chr3 = ((enc3 & 3)  127) && (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  191) && (c