Unable to use as dynamic element
binaryben opened this issue Ā· comments
Benny Michaels commented
I'm trying to allow an icon to be inserted into another component via a prop.
This is the (simplified) component:
<template>
<template v-if="icon">
<component :is="icon" />
</template>
<input />
</template>
<script setup lang="ts">
defineProps<{
icon?: string
placeholder?: string
}>()
</script>
And elsewhere I am doing this:
<Input icon="i-mdi-search" />
<i-mdi-search />
This results in the following DOM:
<i-mdi-search></i-mdi-search>
<input>
<svg>
<!-- Icon inserted correctly -->
</svg>
Is there a way to make the icon work with the <component :is= ...
feature of Vue? Alternatively, could a generic icon component be provided as part of the extension itself that uses a prop?
Anthony Fu commented