【小程序】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文件

import svg from './utils/svg.js'
Vue.prototype.$svg = svg;

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

1.设置image

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

2.组件参数

	props: {title: {type: String,default: '',required: true,},size: {type: String,default: '18',},color: {type: String,default: '#999',},},

3.读取缓存对象

	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文件,写入缓存对象

		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

		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;},

引用

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

参考: 动态设置svg颜色

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/53466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聚铭下一代智慧安全运营中心荣获CNNVD兼容性资质证书

近日&#xff0c;聚铭网络旗下安全产品——聚铭下一代智慧安全运营中心正式通过了国家信息安全漏洞库&#xff08;CNNVD&#xff09;兼容性认证测试&#xff0c;荣获国家信息安全漏洞库兼容性资质证书。 关于CNNVD兼容性 国家信息安全漏洞库&#xff08;CNNVD&#xff09;是…

2003-2022年各省区域创新能力评价相关指标数据(报告年份2003-2022年)

2003-2022年各省区域创新能力相关指标数据&#xff08;报告年份2003-2022年&#xff09; 1、来源&#xff1a;2003-2022年中国区城创新能力评价报告 2、指标&#xff1a;综合值、知识创造综合指标、研究开发投人综合指标、专利综合指标、科研论文综合指标、知识获取综合指标、…

CSS02-字体属性、文本属性

一、字体属性 CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。 1-1、font-family属性 当font-family有多个值的时候&#xff0c;代码会依次查找当前系统中存在哪种字体&#xff0c;有则使用&#xff0c;没有则查找下一个字体。 1-2、font-size属性 1-3…

解决ArmDS Fast Models 中部分内核无法上电的问题

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 解决ArmDS Fast Models 中部分内核无法上电的问题。 2、 问题场景 在调用ArmDS的Fast Models中的Cortex-A55的模型&#xff0c;只有Core 0是上电状态&#xff0c;而Core 1处于掉电状态&#xff0c;如图2-1所示&…

AI大模型日报#0923:李飞飞创业之后首个专访、华为云+腾讯音乐发布昇腾适配方案

导读&#xff1a;AI大模型日报&#xff0c;爬虫LLM自动生成&#xff0c;一文览尽每日AI大模型要点资讯&#xff01;目前采用“文心一言”&#xff08;ERNIE-4.0-8K-latest&#xff09;、“智谱AI”&#xff08;glm-4-0520&#xff09;生成了今日要点以及每条资讯的摘要。欢迎阅…

基于单片机无线智能报警系统的设计

文章目录 前言资料获取设计介绍功能介绍设计程序具体实现截图设计获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对…

计算机毕业设计 基于Python的荣誉证书管理系统 Django+Vue 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

2024全球超模大赛(北京|山东|内蒙三城联动)顺利举办

近日&#xff0c;2024 全球超模大赛&#xff08;北京|山东|内蒙&#xff09;三城联动暨新国潮文化赛事主题发布会在紫薇美力集团国贸鲁采赋盛大举行。此次发布会旨在鼓励优质模特共同传播中国传统文化&#xff0c;让其在全球范围内绽放光彩&#xff0c;展现中国人的骄傲与风采&…

用Python提取PowerPoint演示文稿中的音频和视频

将多种格式的媒体内容进行重新利用&#xff08;如PowerPoint演示中的音频和视频&#xff09;是非常有价值的。无论是创建独立的音频文件、提取视频以便在线分发&#xff0c;还是为了未来的使用需求进行资料归档&#xff0c;从演示文稿中提取这些媒体文件可以为多媒体内容的多次…

基于STM32的温度、电流、电压检测proteus仿真系统(OLED、DHT11、继电器、电机)

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STM32F103C8T6 采用DHT11读取温度、滑动变阻器模拟读取电流、电压。 通过OLED屏幕显示,设置电流阈值为80,电流小阈值为50,电压阈值为60,温度阈值为30 随便哪个超过预祝,则继电器切断,LE…

【sgCreateCallAPIFunctionParam】自定义小工具:敏捷开发→调用接口方法参数生成工具

<template><div :class"$options.name" class"sgDevTool"><sgHead /><div class"sg-container"><div class"sg-start"><div style"margin-bottom: 10px">参数列表[逗号模式]<el-too…

9.23作业

仿照string类&#xff0c;自己手动实现 My_string 代码如下 MyString.h #ifndef MYSTRING_H #define MYSTRING_H #include <iostream> #include <cstring>using namespace std;class My_string { private:char *ptr; //指向字符数组的指针int size; …

十大常用加密软件排行榜|2024年好用的加密软件推荐【精选】

在信息安全日益重要的时代&#xff0c;加密软件成为保护个人和企业数据的关键工具。选择合适的加密软件可以有效防止数据泄露和未授权访问。以下是2024年值得推荐的十大加密软件&#xff0c;帮助你找到适合的解决方案。 1. Ping32加密软件 Ping32是一款功能强大的加密软件&…

Linux C# Day4

作业&#xff1a; 1.统计家目录下.c文件的个数 #!/bin/bash num0 for filename in ls ~/*.c do((num)) done echo $num2.定义一个稀疏数组(下标不连续)&#xff0c;写一个函数&#xff0c;求该稀疏数组的和&#xff0c;要求稀疏数组中的数值通过参数传递到函数中arr([2]9 [4…

Android轻量级RTSP服务使用场景分析和设计探讨

技术背景 好多开发者&#xff0c;对我们Android平台轻量级RTSP服务模块有些陌生&#xff0c;不知道这个模块具体适用于怎样的场景&#xff0c;有什么优缺点&#xff0c;实际上&#xff0c;我们的Android平台轻量级RTSP服务模块更适用于内网环境下、对并发要求不高的场景&#…

基于深度学习的药品三期OCR字符识别

在药品生产线上,药品三期的喷码与条形码识别是保证药品追溯和安全管理的重要环节。传统的识别方法依赖于人工操作,不仅效率低下且容易出错。随着深度学习技术的不断发展,基于OCR(Optical Character Recognition,光学字符识别)的自动化识别系统逐渐成为主流。本文将以哪吒…

DataOps:解决数字化转型中数据价值挖掘挑战的最佳方案

云计算de小白 随着数字化转型的普及与深入&#xff0c;大数据技术在各行业被广泛应用&#xff0c;企业生产、营销、运营等各个环节的数据将被广泛采集&#xff0c;数据应用开发需求的增长、数据使用者角色的复杂度导致企业数据开发、数据运维的工作量、数据应用交付协同难度大…

电子看板实时监控数据可视化助力工厂精细化管理

在当今竞争激烈的制造业领域&#xff0c;工厂的精细化管理成为提高竞争力的关键。而电子看板实时监控数据可视化作为一种先进的管理工具&#xff0c;正为工厂的精细化管理带来巨大的助力。 一、工厂精细化管理的挑战 随着市场需求的不断变化和客户对产品质量要求的日益提高&am…

VMware ESXi 8.0U3b macOS Unlocker OEM BIOS 2.7 集成网卡驱动和 NVMe 驱动 (集成驱动版)

VMware ESXi 8.0U3b macOS Unlocker & OEM BIOS 2.7 集成网卡驱动和 NVMe 驱动 (集成驱动版) 发布 ESXi 8.0U3 集成驱动版&#xff0c;在个人电脑上运行企业级工作负载 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-esxi-8-u3-sysin/&#xff0c;查看最新版…

CSP-J 2019 入门级 第一轮(初赛) 完善程序(1)

【题目】 CSP-J 2019 入门级 第一轮&#xff08;初赛&#xff09; 完善程序&#xff08;1&#xff09; 1.&#xff08;矩阵变幻&#xff09;有一个奇幻的矩阵&#xff0c;在不停的变幻&#xff0c;其变幻方式为&#xff1a; 数字 0 变成矩阵 0 0 0 1 数字 1 变成矩阵 1 1 1 0 …