Vue 3中动态渲染Heroicons组件失败问题求助

问题根源 #

你传递的是字符串"CalendarDaysIcon"，但Vue的<component :is="..."需要接收组件对象而非字符串名称。直接写<CalendarDaysIcon />时，Vue会自动解析为导入的组件对象，所以能正常渲染；传字符串的话，Vue会把它当成自定义HTML标签，因此生成空的<calendardaysicon>标签。

方案1：直接传递组件对象（推荐） #

这种方式更直观，也避免了额外的映射逻辑：

1. 父组件：先导入需要的图标组件，直接传递组件对象而非字符串

<template>
  <TimelineItem :icon="CalendarDaysIcon" />
  <TimelineItem :icon="UserIcon" />
  <!-- 其他图标组件直接传递即可 -->
</template>

<script setup>
// 根据需求导入需要的10种Heroicons
import { CalendarDaysIcon, UserIcon, ClockIcon, ... } from '@heroicons/vue/24/outline'
import TimelineItem from './TimelineItem.vue'
</script>

2. 子组件：直接用<component>渲染传入的组件对象

<template>
  <div class="timeline-item">
    <component :is="icon" class="w-5 h-5 text-gray-500" />
    <!-- 其他子组件内容 -->
  </div>
</template>

<script setup>
defineProps({
  icon: {
    type: Object,
    required: true
  }
})
</script>

方案2：字符串映射组件对象 #

如果必须传递字符串（比如后端返回标识等场景），可以在子组件中维护图标映射表：

1. 子组件：导入所有需要的图标，创建字符串到组件对象的映射

<template>
  <div class="timeline-item">
    <component :is="targetIcon" class="w-5 h-5 text-gray-500" />
    <!-- 其他子组件内容 -->
  </div>
</template>

<script setup>
import { computed } from 'vue'
// 导入你需要的10种Heroicons
import { 
  CalendarDaysIcon, 
  UserIcon, 
  ClockIcon,
  // 补充剩余7种图标
} from '@heroicons/vue/24/outline'

const props = defineProps({
  icon: {
    type: String,
    required: true
  }
})

// 建立字符串与组件对象的映射
const iconMap = {
  CalendarDaysIcon,
  UserIcon,
  ClockIcon,
  // 对应添加其他图标映射
}

// 根据传入的字符串获取对应组件
const targetIcon = computed(() => iconMap[props.icon] || null)
</script>

2. 父组件：正常传递图标名称字符串即可

<template>
  <TimelineItem icon="CalendarDaysIcon" />
  <TimelineItem icon="UserIcon" />
</template>

<script setup>
import TimelineItem from './TimelineItem.vue'
</script>

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