mpvue micro-channel used svg icon applet, and by the dynamically changing icon color codes

First, start with the next svg format (given an official explanation):

1. It refers to a Scalable Vector Graphics SVG (Scalable Vector Graphics)
2. SVG is used to define a vector graphics-based network
3. SVG uses XML format definition graphics
4. SVG image under magnification or changing the size of its image quality will not be lost
5. SVG is a standard World Wide Web Consortium
6. SVG standards such as the W3C DOM and XSL or the like as a whole

In mpvue so we can directly use svg icon:

<img style="width:45rpx;height:45rpx;" src="/static/icon/index/zaixianzhanting.svg"/>

svg path icon:

we know is a svg icon xml format defined by xml code fill to modify the color of the icon of property, UI to the svg default is black, when we need other color icons, we can directly modify the source code of the fill attribute values to achieve the purpose to change colors.

(Note: svg may have multiple Fill , replacement can be replaced when necessary)

But if we need to dynamically modify the color of the icon when the user performs it? Is each color icon and then create a new svg references? The answer is definitely no.

Directly to the idea:
Since svg xml is defined by an image, then why can not we get the source code svg icon first, then where the fill attribute values replace the color we need it?
Then the source code into base64 format and then after the replacement, it is not possible to achieve dynamic color change of the icon?

Applet read files api provided for our method: wx.getFileSystemManager () readFile ().
We can get to the source svg file by this method.

mpvue frame we can directly package a vue assembly, to facilitate the use of individual pages

Component Code:

icons components:

<template>
    <div>
      <img :style="{width: size + 'rpx',height: size + 'rpx'}" :src="imgurl"/>
    </div>
</template>

<script>
  import { Base64 } from 'js-base64'

export default {
    props: {
      size: {
        type: [Number, String],
        default: 45
      },
      src: [String],
      color: [String]
    },
    data () {
      return {
        imgurl: ''
      }
    },
    created () {
      if (this.color) {
        // 先获取svg源码字符串，替换 file="#ffffff" 颜色这个属性，再将这个字符串转化为base64，达到修改颜色的目的
        wx.getFileSystemManager().readFile({ //调用微信小程序接口读取文件 
          filePath: this.src,
          encoding: 'binary', // 解析成源码格式
          success: res => {
            const str = res.data.replace(/fill="#[a-zA-Z0-9]{0,6}"/, 'fill="' + this.color + '"')
            const base64 = Base64.encode(str)
            this.imgurl = 'data:image/svg+xml;base64,' + base64
          }
        })
      } else {
        this.imgurl = this.src
      }
    }
  }
</script>

Components: Use vue components Needless to say it ~ first register and then you can use the page.

<icons  src="/static/icon/index/zaixianzhanting.svg" color="#cccccc" size="40"/>

Base64 string needs to be introduced into the source JS-base64 this js

npm installed directly:
$ npm install --save JS-Base64

Well, you're done!

The original is not easy, please indicate the source! !