nuxt3 通过 import.meta.glob 获取所有 icon 并展示

Iconlist 组件

<template>
	<div class="bg-white flex flex-wrap">
		<div v-for="i in result" @click="" class="flex flex-col items-center w-[300px] h-[80px]">
			<div @click="copyToClipboard(i.name)">{{ i.name }}</div>
			<div class="w-full h-[40px] flex items-center justify-center flex-none">
				<component :is="i.component" :size="30" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
// import.meta.glob('./*.vue') 获取此相对路径下所有.vue 文件 测试后应该是不会包含自身组件
// glob方法应该是源自vite
const a = import.meta.glob('./*.vue')
/** 此结构为
 *  { "./Arrow.vue":()=>import("/_nuxt/components/Icons/Arrow.vue") }
 */

const result = Object.entries(a).map(([key, value]) => {
	return {
		name: `<Icons${key.replace('.vue', '').replace('./', '')} />`,
		component: defineAsyncComponent(value),
	}
})
</script>