vite-auto-import-svg 是一个用于在 Vite 项目中自动导入 SVG 文件的插件。它可以帮助你直接将 SVG 文件作为 Vue 组件使用，而无需手动导入。以下是它的使用方法：

1.安装插件

首先，安装 vite-auto-import-svg 插件：

npm install vite-auto-import-svg --save-dev

2.配置vite.config.js

在 vite.config.js 或 vite.config.ts 中启用插件：

import { defineConfig } from 'vite';
import { svgBuilder } from 'vite-auto-import-svg'

export default defineConfig({
  plugins: [
    svgBuilder('./src/assets/icons/'), //svg存放路径
  ],
});

3.使用 SVG 组件

在你的 Vue 组件中，可以直接使用 SVG 文件生成的组件，而无需手动导入。

例如，如果你的 SVG 文件 home.svg 位于 src/assets/icons 目录中，你可以这样使用：

<script>
export default {
  // 无需手动导入 IconHome
};
</script>

4.示例目录结构

假设你的项目结构如下：

src/
├── assets/
│   └── icons/
│       ├── home.svg
│       └── user.svg
├── components/
│   └── MyComponent.vue

在 MyComponent.vue 中，可以直接使用 SVG 组件：

总结

vite-auto-import-svg 是一个方便的插件，适合在 Vite 项目中自动导入 SVG 文件并生成 Vue 组件。通过简单的配置，你可以轻松地在项目中使用 SVG 图标，而无需手动导入