Unable to use <Component :is=""

[dev-vinicius-andrade]

Describe the bug

I'm currently using the plugin and now I need to create some components dynamically.

In my vite.config.ts I've the following configuration

import ViteIconsResolver from 'unplugin-icons/resolver';
//....
			resolvers: [
				ViteIconsResolver({
					componentPrefix: 'iconify',
					enabledCollections: ['fluent-emoji', 'fluent-emoji-flat', 'fa', 'mdi', 'line-md', 'flagpack', 'ic'],
				}),
			],

This allows me to use the component like

<template>
    <IconifyFaFacebookF :color="socialIconsColors" />
</template>

But currently i need to make it work more dynamicaly, like:

 <template>
    <Component v-for="(iconName,index) in availableIcons :color="socialIconsColors" />
</template>
<script setup lang="ts">
import {computed} from 'vue'
const availableIcons = computed(()=>['IconifyFaFacebookF','IconifyFaInstagram']);
</script>

But I can't get it to work. Is it possible?

Other thing is that i can't change the icons properties using :width and :height

Reproduction

Dynamicaly create icons based on a list of iconNames

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 14.32 GB / 31.91 GB
  Binaries:
    Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.76), ChromiumDev (Hey friend

In an effort to grow oh-my-posh, the decision was made to no
longer support the PowerShell module. Over the past year, the
added benefit of the module disappeared, while the burden of
maintaining it increased.

However, this doesn't mean oh-my-posh disappears from your
terminal, it just means that you'll have to use a different
tool to install it.

All you need to do, is follow the migration guide here:

https://ohmyposh.dev/docs/migrating)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[dev-vinicius-andrade]

any news regarding it?

[huluobotx]

I have got the same problem

  <template #title>
    <el-icon v-if="menu.meta.icon"><component :is="menu.meta.icon"/></el-icon>
    <span>{{ menu.meta.title }}</span>
  </template>
  <menu-item v-for="(item, key) in menu.children" :key="key" :menu="item" :basePath="pathResolve" />
</el-sub-menu>

It's not effect

[dev-vinicius-andrade]

would be very nice having this feature

[Yiddishe-Kop]

Currently that auto-imports doesn't work with dynamic components, my workaround was to explicitly import dynamically used icons:

<template>
    <Component :is="component" />
</template>

<script setup>
import IconTablerHome from '~icons/tabler/smart-home'
import IconTablerListDetails from '~icons/tabler/list-details'
import IconTablerGift from '~icons/tabler/gift'

const props = defineProps({
    name: String,
    set: {
        type: String,
        default: 'tabler',
    },
})

const icons = {
    'tabler-home': IconTablerHome,
    'tabler-list-details': IconTablerListDetails,
    'tabler-gift': IconTablerGift,
}

const component = computed(() => icons[`${props.set}-${props.name}`])
</script>

[antfu]

#5 (comment)

Please search for existing issues before creating one.