Vue3+ts+vite项目中使用vite-plugin-svg-icons插件处理svg，vue3项目vite中使用svg

在Vue3项目中使用Vite时，可以使用vite-plugin-svg-icons来处理SVG图标。以下是如何配置和使用该插件的步骤：

1. 安装插件：

npm install vite-plugin-svg-icons --save-dev

2. 在vite.config.ts中配置插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Icons from 'vite-plugin-svg-icons';
 
// 如果需要配置插件选项，可以像下面这样传递
const svgIconOptions = { /* 插件选项 */ };
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Icons(svgIconOptions)
  ]
});

3. 在组件中使用SVG图标：

首先确保你的SVG文件放在项目的src/assets/icons目录下（这个路径可以在插件配置中修改）。

然后，在Vue组件中，你可以这样使用SVG图标：

<template>
  <div>
    <!-- 使用名为 'example' 的SVG图标 -->
    <svg-icon name="example" />
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  // 这里可以配置更多选项，例如传递props给svg-icon组件
});
</script>

确保你的<svg-icon>组件被正确注册，可以在main.ts中全局注册：

import { createApp } from 'vue';
import App from './App.vue';
// 确保已经安装了vite-plugin-svg-icons并正确配置
 
const app = createApp(App);
 
// 全局注册svg-icon组件
app.component('SvgIcon', /* 导入你的svg-icon组件 */);
 
app.mount('#app');

现在，当你运行Vite开发服务器时，所有放在src/assets/icons目录下的SVG图标都会被自动处理，并且可以通过<svg-icon>组件进行使用。