在vite中怎么全局导入svg

在Vite中全局导入SVG文件可以通过两种方式实现：

使用vite-plugin-svg-icons插件：

首先，安装插件：

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

在vite.config.js文件中添加插件配置：

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

export default defineConfig({
  plugins: [
    svgIcons({
      iconDirs: [/* 指定 SVG 文件所在的目录路径 */],
      symbolId: 'icon-[dir]-[name]' // SVG 文件的 ID 命名规则
    })
  ]
})

然后，在你的代码中使用全局导入的 SVG 文件：

import 'virtual:svg-icons-register' // 导入 SVG 文件的注册
import { VueSvgIconPlugin } from '@yzfe/vue3-svgicon'

createApp(App)
  .use(VueSvgIconPlugin)
  .mount('#app')

使用vite-plugin-svg-sprite插件：

首先，安装插件：

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

在vite.config.js文件中添加插件配置：

import { defineConfig } from 'vite'
import svgSprite from 'vite-plugin-svg-sprite'

export default defineConfig({
  plugins: [
    svgSprite({
      symbolId: 'icon-[dir]-[name]' // SVG 文件的 ID 命名规则
    })
  ]
})

然后，在你的代码中使用全局导入的 SVG 文件：

import { createApp } from 'vue'
import App from './App.vue'
import SvgIcon from '@/components/SvgIcon.vue'
import { VueSvgPlugin } from '@yzfe/vue3-svgicon'

createApp(App)
  .component('svg-icon', SvgIcon)
  .use(VueSvgPlugin, {
    tagName: 'svg-icon'
  })
  .mount('#app')

无论使用哪种方式，你都可以在代码中像使用组件一样使用全局导入的 SVG 图标，例如：

<template>
  <div>
    <svg-icon name="icon-name" />
  </div>
</template>
``