Vue3+vite统一收集管理svg遇到的require和import使用问题

在之前Vue2+webpack中,能使用require方法统一引入svg

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
console.log(req)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

在使用vite之后,会报错: require is not defined。经过查阅可以使用插件解决 blog.csdn.net/pig_ning/ar… 该链接使用的是:

npm i vite-plugin-require-transform --save-dev

还有一个插件是：

npm i vite-plugin-require --save-dev

使用这两个插件均无法解决报错,所以使用ESM的import尝试收集导入

收集svg的index文件:

const svgModules = import.meta.glob('./svg/*.svg', { eager: true });

// 创建一个对象来存储引入的 SVG 文件
const svgIcons = {};

// 遍历所有引入的模块
for (const path in svgModules) {
  // 获取文件名（不带路径和扩展名）
  const fileName = path.replace(/^.*[\\/]/, '').replace(/\.\w+$/, '');
  // 将文件内容存储到对象中
  svgIcons[fileName] = svgModules[path].default;
}

console.log(svgIcons)
// 导出所有 SVG 图标
export default svgIcons;

组件:

<template>
  <component class="svg-icon" :is="svgIcons[icon]" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import svgIcons from "@/icons/index.js";
const svgList = ref(svgIcons);
defineProps({
  icon: String,
});
</script>

<style scoped>
.svg-icon {
  /* width: 3em; */
  /* height: 3em; */
  fill: currentColor;
}
</style>

使用:

<template>
<div>
  <div >
    <SvgIcon icon="icon-share"></SvgIcon>
  </div>
</div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref, onActivated } from "vue";
import SvgIcon from '@/components/SvgIcon.vue'
const route = useRoute();
const router = useRouter();
onMounted(() => {
});
</script>

<style lang="scss">
</style>