vue3+vite使用svg图片

一、下载插件

yarn add vite-plugin-svg-icons -D

// or

npm i vite-plugin-svg-icons -D

二、配置

1、vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
export default defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icon/svg')],
            // 指定symbolId格式
            symbolId: '[name]',
        }),
    ]
})

2、在src/assets目录中添加icon/svg目录，svg格式的图片放在src/assets/icon/svg/下

3、src/components目录下创建icon/icon-component.vue文件，代码：

4、main.ts

import SvgIcon from './components/icon/icon-component.vue'
import 'virtual:svg-icons-register'


const app = createApp(App);

app.component('svg-icon', SvgIcon)
app.mount('#app')

三、使用svg图片