首先需要以组件形式使用svg，请先看这篇文章：vite中加载使用svg
可能是跟原博主使用的svg格式不同，用:style="{ color: color }"修改颜色不生效，因此做了一点修改，此修改适用的svg如下：
- 在iconfont官网收藏下载的svg格式图标，打开文件删除其中的
fill=xxx部分，就可以使用 - 使用转换工具转换，或设计同事提供的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>