unplugin / unplugin-icons

šŸ¤¹ Access thousands of icons as components on-demand universally.

Home Page:https://www.npmjs.com/package/unplugin-icons

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unable to use as dynamic element

binaryben opened this issue Ā· comments

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?