<p>使用<strong>Vue 3.2.41</strong>-@heroicons/vue 2.0.14-inertiajs 1.0-vite 4.0.0</p> <p>我正在使用這個呼叫 Vue 元件：</p> <p><code><TimelineItem icon="CalendarDaysIcon" /></code></p> <p>此組件如下所示：</p> <pre class="brush:php;toolbar:false;"><template> <component :is="icon" /> <!-- doesn't work --> <CalendarDaysIcon /> <!-- works --> </template> <script setup> import { CalendarDaysIcon, } from '@heroicons/vue/20/solid' const props = defineProps(['icon']) </script></pre> <p>渲染的 HTML 是這樣的：</p> <pre class="brush:php;toolbar:false;"><calendardaysicon></calendardaysicon> <!-- not what I want --> <svg> ... </svg> <!-- correct but not dynamic --></pre> <p>換句話說，當我希望<code><component :is /></code> 渲染組件時，它只是渲染一些空的<code><calendardaysicon></code> ; 標記。我可以看到它已將其變為小寫，並且不知道如何將其強制返回 PascalCase，我什至不確定這是否會對情況有所幫助。 </p> <p>我稍微簡化了程式碼，但完整版本將有一個包含 10 個不同圖示的清單（使用 PascalCase 名稱的 Heroicons 套件的所有部分），我希望能夠從主元件輕鬆調用它們.</p>

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

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

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

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

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