Dynamically render a Vue component within another component

Question

UsingVue 3.2.41-@heroicons/vue 2.0.14-inertiajs 1.0-vite 4.0.0

I'm using this to call the Vue component:

The component looks like this:

<template>
    <component :is="icon" /> <!-- doesn't work -->
    <CalendarDaysIcon /> <!-- works -->
</template>

<script setup>
    import {
        CalendarDaysIcon,
    } from '@heroicons/vue/20/solid'

    const props = defineProps(['icon'])
</script>

The rendered HTML looks like this:

<calendardaysicon></calendardaysicon> <!-- not what I want -->
<svg> ... </svg> <!-- correct but not dynamic -->

In other words, when I want to render the component, it just renders some empty ; mark. I can see that it has changed it to lowercase and I don't know how to force it back to PascalCase, I'm not even sure if that would help the situation.

I've simplified the code a bit, but the full version will have a list of 10 different icons (all parts of the Heroicons package using PascalCase names) and I want to be able to call them easily from the main component.

Answer 1

try:

Answer 2

Use Use only strings containing CalendarDaysIcon

Instead, in the main component, pass the actual component reference like this:

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

<script setup>
    import {
        CalendarDaysIcon,
    } from '@heroicons/vue/20/solid'

    const props = defineProps(['icon'])
</script>

Then, in the TimelineItem component, there is no need to reference any icon:

<template>
    <component :is="icon" /> <!-- now works -->
</template>

<script setup>
    const props = defineProps(['icon'])
</script>

Thanks to @Robert Boes on the Inertia Discord server for the guidance.