本文章采用 base64替换的方案 来实现下动态svg，以支持相似svg在颜色差异下的一图复用，比如：箭头、logo、物品使用状态图戳等。以尽可能极减少了svg的数量，提高了小程序的加载速度。展示效果如下（本地仅有一个right-icon.svg文件，通过传入color颜色差异可以实现svg的颜色调整）：

小程序demo案例：https://developers.weixin.qq.com/s/afULC4mA7iI8

一、市面案例缺陷：翻阅了目前市面上的小程序动态svg的各种代码。大部分都概念没有形成组件，并且没有支持本地svg文件的方案。这样对一些原有的项目改造起来就不方便。

二、主要有以下几个关键点需要注意下：

1. 类名通过 **svg-class="class-name"** 方式传入
2. svg的文件路径通过svgPath传入，这里设置为svgPath是为了便于判别是传入svg。
3. 正则要使用非贪婪模式：即 /(fill|stroke)=".*?"/ 必须携带问号。效果：双引号中间包含任意字符（非贪婪模式），直到遇到下一个双引号为止的字符串。这个正则表达式使用了非贪婪模式，即尽可能少地匹配字符，以避免匹配过多的内容。

三、优化知识点：

1. 如何读取本地SVG文件内容：小程序本身是不支持nodejs那一套fs模块的，因此需要采用wx.getFileSystemManager来进行文件内容读取。https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.getFileSystemManager.html
2. 如何能更换SVG文件中的颜色：SVG文件中的涉及颜色展示属性有好几个，比如fill、stroke、opacity、stop-color等。大家可以根据自己的业务场景进行各自的属性扩展或限制，以达到对自己产品最好的组件。