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

最新推荐文章于 2025-06-26 09:31:21 发布

原创

最新推荐文章于 2025-06-26 09:31:21 发布 · 5.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #mpvue #svg图标动态变色

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

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

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

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

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

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

svg图标的路径：
在这里插入图片描述
我们知道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: