svg简单图标在小程序中的使用分享
发布于 3 年前 作者 huxiuying 4501 次浏览 来自 分享

项目中经常会使用不同颜色的小图标,需要在项目中放置不同颜色的图标图片,有时候涉及图标大小和压缩问题。抽空研究了下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代码在小程序中作为基础组件的使用的内容。有表达或者总结的不对的地方,请多指教,谢谢!

回到顶部