uniapp svgIcon组件封装

舍予一

于 2024-08-05 17:33:05 发布

阅读量390

点赞数 5

分类专栏：前端知识汇总文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/hsy0827/article/details/140456276

版权

前端知识汇总专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在这里插入图片描述

utils/svg/index.ts

存放处理svg的相关方法

// svg 转成url
export function svgToUrl(url: any) {
	var encoded = url
		.replace(/<!--(.*)-->/g, "")
		.replace(/[\r\n]/g, " ")
		.replace(/"/g, `'`)
		.replace(/%/g, "%25")
		.replace(/&/g, "%26")
		.replace(/#/g, "%23")
		.replace(/{/g, "%7B")
		.replace(/}/g, "%7D")
		.replace(/</g, "%3C")
		.replace(/>/g, "%3E");

	let res = '"' + `data:image/svg+xml,${encoded}` + '"'; //需要在字符串前后加上一对引号（非常关键！）
	return res;
}

// svg 修改图片颜色
export function svgChangeColor(url: any, color: string) {
	let modifiedStr;
	// 全颜色修改
	modifiedStr = url.replace(/%23[a-zA-Z0-9]{6}/g, color.replace("#",
		"%23")); //转义后的#等于%23，利用正则表达式，替换所有%23后6位为新的十六进制六位数。
	return modifiedStr;
}

utils/svg/svg.ts

存发svg

interface svgObjInterface {
	[key : string] : string | number | undefined | null | void
}
const svgObj : svgObjInterface = {
	'default': '<svg t="1721036548817" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7142" width="200" height="200"><path d="M371.733 94.172q25.773 0 44.112 17.843t18.339 43.617v247.822q0 25.773-18.339 44.112t-44.112 18.34H123.91q-25.774 0-43.617-18.34t-17.843-44.112V155.632q0-25.773 17.843-43.617t43.617-17.843h247.822z m0 495.644q25.773 0 44.112 17.843t18.339 43.617v248.813q0 25.774-18.339 43.617t-44.112 17.843H123.91q-25.774 0-43.617-17.843t-17.843-43.617V651.276q0-25.774 17.843-43.617t43.617-17.843h247.822z m496.635 0q25.773 0 43.617 17.843t17.843 43.617v248.813q0 25.774-17.843 43.617t-43.617 17.843H620.546q-25.773 0-44.112-17.843t-18.34-43.617V651.276q0-25.774 18.34-43.617t44.112-17.843h247.822z m137.789-386.602q19.826 19.826 19.826 46.59t-19.826 45.6l-184.38 184.38q-19.825 19.825-46.095 19.825t-46.094-19.826l-184.38-184.38q-18.834-18.834-18.834-45.599t18.834-46.59l184.38-184.38Q749.413 0 775.682 0t46.095 18.834z" p-id="7143"></path></svg>',
	'close': '<svg t="1721035318835" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4394" width="200" height="200"><path d="M546.942134 511.818772l327.456957-326.128977c9.617355-9.577423 9.648071-25.135361 0.070648-34.751692-9.577423-9.617355-25.137409-9.647048-34.750668-0.070648L512.119795 477.137729 184.520518 150.868479c-9.616331-9.577423-25.176316-9.545683-34.751692 0.070648-9.577423 9.616331-9.545683 25.174268 0.070648 34.751692l327.457981 326.127953-327.457981 326.128978c-9.616331 9.577423-9.647048 25.135361-0.070648 34.751692a24.496456 24.496456 0 0 0 17.41117 7.231702 24.500552 24.500552 0 0 0 17.340522-7.162078L512.119795 546.499816l327.599276 326.26925a24.492361 24.492361 0 0 0 17.340522 7.162078 24.5026 24.5026 0 0 0 17.41117-7.231702c9.577423-9.617355 9.545683-25.175292-0.070648-34.751692L546.942134 511.818772z" fill="#353535" p-id="4395"></path></svg>'
}
export default svgObj

组件

<template>
	<view :style="{'width': width,'height': height,'background-image': 'url('+svg+')'}" class="svg-icon"></view>
</template>
<script setup lang="ts">
	import svgObj from '@/utils/svg/svg';
	import {
		svgToUrl,
		svgChangeColor
	} from '@/utils/svg/index';
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"

	const props = withDefaults(
		defineProps<{
			name ?: string;
			color ?: string;
			width ?: string;
			height ?: string;
		}>(),
		{
			name: "default",
			color: "#3D3D3D",
			width: "34rpx",
			height: "34rpx",
		}
	);
	const svg = ref();
	onLoad(() => {
		svg.value = svgObj[props.name];
		svg.value = svgChangeColor(svgToUrl(svg.value), props.color)
	})
</script>
<style scoped lang="scss">
	.svg-icon {
		display: inline-block;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>