mpvue微信小程序中使用svg图标，并通过代码动态改变图标颜色

偏执的太偏执、 2021-12-14 09:07 634阅读 0赞

### 微信小程序，mpvue中使用svg图标，并通过代码改变图标颜色 ###

**本文主要是mpvue开发小程序的代码，不过微信小程序原生开发应该也是一样的，思路都是通用的，按照这个思路微信小程序原生开发一样可以实现同样的功能。**

首先先说下svg格式（给出官方说明）：

1.  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2.  SVG 用来定义用于网络的基于矢量的图形
3.  SVG 使用 XML 格式定义图形
4.  SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
5.  SVG 是万维网联盟的标准
6.  SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

在mpvue中我们可以直接这样使用svg图标：

svg图标的路径：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDg3MDQ3_size_16_color_FFFFFF_t_70]  
我们知道svg是xml格式定义的一种图标，是通过xml代码中的**fill**属性来修改图标的颜色的，UI给的svg默认都是黑色，当我们需要其他颜色的图标时，我们可以直接修改源码中的**fill**属性值达到修改颜色的目的。

（注意：svg中可能有多个**fill**，替换时根据需要替换即可）

但是如果我们需要在用户执行的时候动态修改图标的颜色呢?难道每种颜色都新建一个svg图标再引用？答案肯定是否定的。

直接给思路:  
既然svg是通过xml定义图像的，那么为什么我们不能先获取svg图标的源码，再将其中**fill**的属性值替换成我们需要的颜色呢？  
然后再将替换后的源码成base64格式，是不是就可以实现动态的改变图标的颜色了？

小程序api中为我们提供了读取文件的方法：**wx.getFileSystemManager().readFile()**  
通过这个方法我们可以获取到svg文件的源码。

mpvue 框架中我们直接可以封装一个vue组件，方便各个页面使用，组件已经给大家写好了。直接复制到项目就可以使用。

组件代码：  
将字符串源码转化为base64需要引入 **JS-base64** 这个js  
npm直接安装：  
$ npm install --save js-base64

icons组件：

<template>
        <img :style="iconstyle?iconstyle:('width:' + size + 'rpx;height:' + size + 'rpx;')" :src="imgurl" :model="model"/>
    </template>
    <script>
      import {  Base64 } from 'js-base64'
    
    export default { 
        props: { 
          size: { 
            type: [Number, String],
            default: 45
          },
          src: [String],
          iconstyle: [String],
          color: [String],
          stroke: [String],
          model: [String]
        },
        data () { 
          return { 
            imgurl: ''
          }
        },
        watch: { 
          color: function (obj) { 
            this.initImage()
          },
          stroke: function (obj) { 
            this.initImage()
          }
        },
        methods: { 
          initImage () { 
            if (this.color || this.stroke) { 
              // 先获取svg源码字符串，替换 file="#ffff" stroke='#FFFFFF' 颜色这个属性，再将这个字符串转化为base64，达到修改颜色的目的
              wx.getFileSystemManager().readFile({ 
                filePath: this.src,
                encoding: 'binary',
                success: res => { 
                  let basestr = res.data
                  if (this.color) { 
                    const strArr = basestr.split(/fill="#?[a-zA-Z0-9]{0,6}"/g)
                    const oldcolorArr = basestr.match(/fill="#?[a-zA-Z0-9]{0,6}"/g)
                    const newcolorArr = this.color.split(',')
                    for (let i = 0; i < newcolorArr.length; i++) { 
                      const color = newcolorArr[i]
                      if (color) { 
                        oldcolorArr[i] = `fill="${ color}"`
                      }
                    }
                    let str = ''
                    for (let i = 0; i < strArr.length; i++) { 
                      str += (strArr[i] + (oldcolorArr[i] ? oldcolorArr[i] : ''))
                    }
                    basestr = str
                  }
                  if (this.stroke) { 
                    const strArr = basestr.split(/stroke="#?[a-zA-Z0-9]{0,6}"/g)
                    const oldcolorArr = basestr.match(/stroke="#?[a-zA-Z0-9]{0,6}"/g)
                    const newcolorArr = this.stroke.split(',')
                    for (let i = 0; i < newcolorArr.length; i++) { 
                      const color = newcolorArr[i]
                      if (color) { 
                        oldcolorArr[i] = `stroke="${ color}"`
                      }
                    }
                    let str = ''
                    for (let i = 0; i < strArr.length; i++) { 
                      str += (strArr[i] + (oldcolorArr[i] ? oldcolorArr[i] : ''))
                    }
                    basestr = str
                  }
                  const base64 = Base64.encode(basestr)
                  this.imgurl = 'data:image/svg+xml;base64,' + base64
                }
              })
            } else { 
              this.imgurl = this.src
            }
          }
        },
        created () { 
          this.initImage()
        }
      }
    </script>
    <style scoped>
      img{ 
        display: block;
      }
    </style>

组件使用：vue组件的使用不用我多说了吧~ 先在页面注册然后就能使用了。

考虑到svg还有stroke属性也可以改变颜色。并且一个文件有多个fill,stroke属性（color对应svg的fill属性，stroke对应svg的stroke属性）  
我们来通过逗号”，“来分割颜色属性，逗号分隔后的数组来确定我们要替换哪个fill属性或者stroke属性。

组件使用范例：

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

好了，大功告成！

原创不易，转载请注明出处！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDg3MDQ3_size_16_color_FFFFFF_t_70]: /images/20211214/de79249698244159b50f60d4ae99def5.png