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