Vue3+Vite 动态修改svg图片颜色

首先需要以组件形式使用svg，请先看这篇文章：vite中加载使用svg

可能是跟原博主使用的svg格式不同，用:style="{ color: color }"修改颜色不生效，因此做了一点修改，此修改适用的svg如下：

1. 在iconfont官网收藏下载的svg格式图标，打开文件删除其中的fill=xxx部分，就可以使用
2. 使用转换工具转换，或设计同事提供的svg文件，需要检查里面是否有定义颜色的属性，如fill=xxx（用填充做图标主体）或stroke=xxx（用边框做图标主体），如果有，删除掉这两个属性的部分

我们在页面上用svg可能需要为它指定颜色，也可能用来当窗口关闭的图标，使用默认的文字颜色即可。以下改动也兼容了这两种情况，使用SvgIcon时color属性不传，使用默认颜色。

SvgIcon.vue

<template>
	<svg :class="svgClass" v-bind="$attrs" :style="color ? { fill: color, stroke: color } : {}">
		<use :xlink:href="iconName"></use>
	</svg>
</template>

<!-- script 部分未修改，省略 -->

<style lang="less" scoped>
.svg-icon {
	fill: @theme-text;
	width: 1.2em;
	height: 1.2em;
	vertical-align: middle;
}
</style>