Vite动态导入svg用作vue图标

Feb 17, 2023

1、需要安装一个vite-svg-loader

npm i --save-dev vite-svg-loader

2、在vite.config.js中使用

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-svg-loader' // 导入

export default defineConfig({
  plugins: [vue(), svgLoader()], // 使用
})

3、动态导入svg文件，下面是用动态导入当前目录下的svg作为示例

import { defineComponent } from "vue";

export default {
  install(app) {
    const svgs = import.meta.glob("./*.svg", { eager: true }); // 导入当前目录下所有的svg文件
    Object.keys(svgs).map(key => {
      // key 为 ./svg-name.svg 路径的形式，需要做个替换 -> svg-name
      const name = key.replace(/\.\/(.*?)\.svg/, "$1"); 
      const comp = defineComponent(svgs[key]);
      app.component(name, comp); // 全局注册组件即可使用
    });
  }
};