vite js 使用svg

vite.js是一个基于ES模块的构建工具，它可以快速构建现代化的Web应用程序。使用vite.js可以很方便地使用SVG图标。

要在vite.js中使用SVG图标，可以使用vite-plugin-svg-icons插件。首先，你需要安装该插件。可以使用以下命令来安装插件：

yarn add vite-plugin-svg-icons -D

或者

npm i vite-plugin-svg-icons -D

安装完成后，你需要在vite.config.js文件中添加插件的配置。在配置文件中，你可以指定SVG图标的目录和输出目录等信息。以下是一个示例配置：

import { defineConfig } from 'vite'
import svgIcons from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    svgIcons({
      iconDirs: [/* 指定SVG图标的目录 */],
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
})

配置完成后，你可以在页面中使用SVG图标。插件会将SVG图标转换为Vue组件，你可以像使用其他组件一样在页面中导入和使用它们。以下是一个示例：

<template>
  <div>
    <IconHome />
    <IconUser />
  </div>
</template>

<script>
import { IconHome, IconUser } from 'vite-plugin-svg-icons'

export default {
  components: {
    IconHome,
    IconUser,
  },
}
</script>

在上面的示例中，我们从vite-plugin-svg-icons导入了IconHome和IconUser组件，并在页面中使用它们。