安装
我们可以使用以下命令来安装 vite-plugin-svg-icons 插件：
npm install vite-plugin-svg-icons --save-dev
配置
在安装了 vite-plugin-svg-icons 插件后，我们可以在 vite.config.js 中进行配置。以下是一个示例配置：
import { defineConfig } from 'vite'
import svgIcons from 'vite-plugin-svg-icons'
export default defineConfig({
plugins: [
svgIcons({
// 指定要处理的 SVG 文件夹路径
iconDirs: [require.resolve('src/assets/svgs')],
// 指定要生成的组件名称
svgsDir: 'src/svgs',
// 指定要生成的组件类型
symbolId: 'icon-[dir]-[name]',
}),
],
})
在上面的配置中，我们使用 svgIcons 函数创建了一个插件。该插件接受一个配置对象，其中包含以下三个选项：
iconDirs：指定要处理的 SVG 文件夹路径。
svgsDir：指定要生成的组件名称。
symbolId：指定要生成的组件类型。
接下来我们需要在main.js中引入
import 'virtual:svg-icons-register'
使用
新建一个svg-icon组件，按照自己喜欢的方式全局引入或局部引入，内容如下：
<template>
<svg class="svg-icon" aria-hidden="true" v-on="$listeners">
<use :href="symbolId" :fill="color" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
color: {
type: String,
default: '#333',
},
},
data() {
return {
symbolId: ''
}
},
mounted() {
this.symbolId = `#${this.prefix}-${this.name}`
},
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
}
</style>
页面中使用：
<svg-icon name="content-msg"></svg-icon>
如果遇到设置了颜色不生效，或者部分生效的问题，可以使用编辑器打开svg文件，看下标签上的fill字段，设置为currentColor。
报错
报错：Cannot find package ‘fast-glob‘，安装下对应依赖就可以了
npm install fast-glob -D
