Nuxt3中@heroicons/vue动态加载问题：图标无法显示求助

问题核心：Vue的<component :is="...">接收的是组件对象，而非组件名称的字符串，你传入的"HomeIcon"是字符串，所以无法被识别为有效组件。

解决步骤： #

1. 在父组件的setup中创建组件映射对象，将导入的图标组件与字符串名称一一对应：

import { HomeIcon, FilmIcon, PlusIcon } from "@heroicons/vue/solid"

// 创建组件映射表
const iconMap = {
  HomeIcon,
  FilmIcon,
  PlusIcon
}

2. 在模板中通过映射表获取对应的组件对象，传给<component>：

<template v-for="(profileItem, i) in accountSetFields" :key="i">
  <ProfileItems :user="user" :item="profileItem">
    <template v-slot:icon>
      <!-- 通过字符串key从映射表中取组件对象 -->
      <component :is="iconMap[profileItem.icon]"></component>
    </template>
  </ProfileItems>
</template>

若需传递到子组件ProfileItems.vue： #

• 父组件修改传参：

<template v-for="(profileItem, i) in accountSetFields" :key="i">
  <ProfileItems 
    :user="user" 
    :item="profileItem"
    :icon-component="iconMap[profileItem.icon]"
  />
</template>

• 子组件ProfileItems.vue中使用：

<template>
  <!-- 其他业务内容 -->
  <component :is="iconComponent"></component>
</template>

<script setup>
const props = defineProps({
  iconComponent: {
    type: Object,
    required: true
  }
})
</script>

内容的提问来源于stack exchange，提问作者user19540948