项目中经常会使用不同颜色的小图标，需要在项目中放置不同颜色的图标图片，有时候涉及图标大小和压缩问题。抽空研究了下svg代码在小程序中如何使用，整理了一个基础组件，以后项目中遇到使用频率高的小图标，用它就比较方便了。项目代码在git平台公开，可克隆下载。

svg代码在小程序中展示：

使用background-image(url('data:image/svg+xml,svg转换后代码'))进行小图标的展示；

svg代码符号转换成十六进制的ascii码：

“<”替换成“%3C”，“>”替换成“%3E”；

fill=color更新图标颜色，color支持英文单词和16进制的颜色码，16进制颜色码“#”替换成“%23”；

svg代码通过iconfont平台复制

js代码：

class SVGCON {
  constructor() {

  }

  svgXml(n, c) {
    let name = n;
    let data = '';
    let casualData = this[name]();
    let newArray = [];
    let color = 'black';
    let newFill = '';
    // 颜色转换
    if (c && c.indexOf('#') >= 0) {
      color = c.replace('#', '%23');
    } else if (c) {
      color = c;
    }
    newFill = "fill=" + "'" + color + "'";
    // 更新颜色，加入fill=color(svg去掉fill=color相关代码)
    // 查找svg中的path数量
    newArray = casualData.split('>');
    casualData = '';
    for (let i = 0; i < newArray.length; i++) {
      if (i == newArray.length - 1) {

      } else {
        newArray[i] = newArray[i] + ' ' + newFill + ">";
      }
      casualData = casualData + newArray[i];
    }

    // 转换成svg+xml
    data = casualData;
    data = data.replace('<', '%3C');
    data = data.replace('>', '%3E');
    data = 'data:image/svg+xml,' + data;
    //双引号展示不出来，需要转换成单引号
    data = data.replace(/\"/g, "'");

    return data;
  }

  arrowRight() {   //向右箭头
    return '复制的svg代码'
  }

  loading() {  //加载中
    return '复制的svg代码'
  }

  setting() {  //设置
    return ''
  }
}
export {
  SVGCON
};

wxml组件代码：

<view class="m-icon mini-class" style='background-image:url("{{backgroundImage}}")'></view>

开发全局基础组件

创建存放全局组件的目录components，开发完成组件之后在app.js配置全局组件

页面直接使用组件

<mini-icon mini-class="icon" icon="arrow-top" color="{{color}}" />

微信扫码预览效果：

代码托管于微信开发者-代码管理：

https://git.weixin.qq.com/yukiyuki/yuki_svg.git

以上是关于svg代码在小程序中作为基础组件的使用的内容。有表达或者总结的不对的地方，请多指教，谢谢！