vue3+vite中实现全局的自定义svg效果

前言：

        vue3+vite中实现全局的自定义svg效果。

实现效果：

实现步骤：

1、安装相应的插件

npm i fast-glob   vite-plugin-svg-icons -S

2、vite.config.js中新增下面内容

//新增+++
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
        vue(),
        //新增+++
        createSvgIconsPlugin({
          // 指定需要缓存的图标文件夹
          iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
          // 指定symbolId格式
          symbolId: '[name]',
          /**
           * 自定义插入位置
           * @default: body-last
           */
          // inject?: 'body-last' | 'body-first'

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

svg的层级：

 ​​​​​​​

3、main.js中配置

// 全局icon配置
import 'virtual:svg-icons-register'

4、在全局组件的文件夹中，加入 svg-icon.vue

关于全局组件的配置，点我看相关资料

5、在页面上使用：

图片：src/ assets/ icons/ svg/ login-user.svg