Vite 全局导入 SVG 文件的两种方法

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

1. 使用'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')

2. 使用'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 图标，例如：