【小程序】uniapp自定义图标组件可动态更换svg颜色

组件描述

通过图标名称加载对应svg,size参数调整图标大小,color参数调整图标颜色

解决思路:

  1. 存svg获svg,对象方式
  2. 正则替换svg的fill值,不改变源文件,通过base64直接加载
  3. 缓存svg源文件,避免重复读取文件

一、手动上传svg文件

将项目需要的svg文件保存到static目录下,通过svg.js(如下图)将icon名称和路径映射,方便后续通过名称加载svg文件

提示:可以考虑在main.js文件里设置全局对象,不使用icon组件在不同页面也可以访问svg文件

typescript 复制代码
import svg from './utils/svg.js'
Vue.prototype.$svg = svg;

二、使用Image组件加载图片资源

1.设置image

html 复制代码
	<image class="icon" :style="{ width: `${size || 18}px`, height: `${size || 18}px` }" :src="svgData"
		mode="scaleToFill" />

2.组件参数

typescript 复制代码
	props: {
		title: {
			type: String,
			default: '',
			required: true,
		},
		size: {
			type: String,
			default: '18',
		},
		color: {
			type: String,
			default: '#999',
		},
	},

3.读取缓存对象

typescript 复制代码
	watch: {
		color(newVal) {
			let svgData = this.svgCache[this.$svg[this.title]];
			if (svgData && newVal) {
				let newFile = this.changeColor(svgData, newVal);
				this.svgData = that.svgToBase64(newFile)
			}
		}
	},

三、读取svg文件,正则替换fill的color值

动态更换svg颜色,原理就是修改svg的fill属性

1.读取svg文件,写入缓存对象

typescript 复制代码
		getSvgFile(src) {
		//读取svg文件
			let that = this;
			const fs = wx.getFileSystemManager();
			fs.readFile({
				filePath: src,
				encoding: 'UTF-8',
				position: 0,
				success(res) {
					let data = res.data;
					if (data) {
						if (data instanceof ArrayBuffer) {
							// 有些设备数据格式是ArrayBuffer需要转换成svg字符串
							that.svgCache[src] = that.arrayBufferToStr(data);
						} else {
							that.svgCache[src] = data;
						}
						let newFile = that.changeColor(that.svgCache[src], that.color)
						that.svgData = that.svgToBase64(newFile);
					}
				},
				fail(res) {
					console.error(res)
				}
			})
		},
		changeColor(data, color) {
			// console.log(data);
			let newSvg;
			if (/fill=".*?"/.test(data)) {
				newSvg = data?.replace(/fill=".*?"/g, `fill="${color}"`);  // SVG有默认色
			} else {
				newSvg = data?.replace(/<svg /g, `<svg fill="${color}" `); // 无默认色
			}
			return newSvg
		},

2.使用Uint8Array进行文件数据转换

替换color值的svg字符串是容易转换成base64,在不改动svg源文件情况下,image可以直接加载处理后的base64

typescript 复制代码
		arrayBufferToStr(buffer) {
			let str = '';
			const uint8Array = new Uint8Array(buffer);
			for (let i = 0; i < uint8Array.length; i++) {
				str += String.fromCharCode(uint8Array[i]);
			}
			return str;
		},
		svgToBase64(svg) {
			const utf8 = new Uint8Array(svg.length);
			for (let i = 0; i < svg.length; i++) {
				utf8[i] = svg.charCodeAt(i);
			}
			// 使用Buffer进行Base64编码
			const base64 = wx.arrayBufferToBase64(utf8.buffer);
			// 返回带有data URI前缀的Base64字符串
			return 'data:image/svg+xml;base64,' + base64;
		},

引用

html 复制代码
<icon :title="item.icon" size="20" :color="currentTab === index ? '#000000' : '#999999'"></icon>

参考: 动态设置svg颜色

相关推荐
BillKu16 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
DevilSeagull16 小时前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
大怪v17 小时前
前端佬:机器学习?我也会啊!😎😎😎手“摸”手教你做个”自动驾驶“~
前端·javascript·机器学习
源码师傅18 小时前
uniapp开源多商户小程序商城平台源码 支持二次开发+永久免费升级
小程序·uni-app·多商户商城源码·uniapp开源商城源码·开源多商户小程序商城平台·商城小程序代码·多商户商城小程序源码
梦远青城19 小时前
C#地方门户网站 基于NET6.0、Admin.NET,uniapp,vue3,elementplus开源的地方门户网站项目
uni-app·开源·门户网站·地方生活网站·本地租房·本地找工作·东川本地生活
gnip20 小时前
链式调用和延迟执行
前端·javascript
杨天天.20 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
weixin_1772972206920 小时前
盲盒抽卡机小程序:从0到1的蜕变之路
小程序·盲盒·抽谷机
说私域20 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的移动互联网人气氛围营造机制研究
人工智能·小程序·开源
Dragon Wu20 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架