记录插件：vite-plugin-svg-icons的安装与使用

安装

我们可以使用以下命令来安装 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