vue(二）vue3 + vite + 自定义svg使用

代码中使用svg图标

版本说明:

"dependencies": {

    "element-plus": "^2.2.17",

    "vue": "^3.2.39",

    "vue-router": "^4.1.5"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^3.1.0",

    "fast-glob": "^3.2.12",

    "vite": "^3.1.0",

    "vite-plugin-svg-icons": "^2.0.1"

  }

用于SVG显示

npm i fast-glob -D

npm i vite-plugin-svg-icons -D

实例：

代码说明：

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icon/svg')],
            // 指定symbolId格式
            symbolId: '[name]',

            /**
             * 自定义插入位置
             * @default: body-last
             */
            // inject?: 'body-last' | 'body-first'

            /**
             * custom dom id
             * @default: __svg__icons__dom__
             */
            // customDomId: '__svg__icons__dom__',
        }),
    ]
})

main.js

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import router from './router/router_config'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import SvgIcon from './components/icon/icon-component.vue'
import 'virtual:svg-icons-register'

createApp(App)
    .component('svg-icon', SvgIcon)
    .use(ElementPlus)
    .use(router)
    .mount('#app')

icon-component.vue

svg目录:

 使用：