Dynamic icon components

[wheatjs]

Is it possible to dynamically use icons?

I'm using the vitesse template and would previously use something like <Icon :icon="myIconVariable" /> but now it seems like that no longer exists so I was wondering if it is still possible to do something like that.

I tried something like this without much luck

<template>
  <component :is="myIconVariable.replace(':', '-')" />
</template>

<script setup>
const myIconVariable = 'mdi:vuejs'
</script>

[antfu]

No, this plugin is designed to be used statically. Can you combine it with vite-plugin-purge-icons to have both SSR icons and runtime dynamic icons.

[wheatjs]

Oh okay, gotcha. I'll give that a shot, thanks!

[ngekoding]

Oh okay, gotcha. I'll give that a shot, thanks!

Have you make it work with vite-plugin-purge-icons?

[antfu]

Due to the mechanism of how unplugin-vue-components works, there is no way to infer a component from a dynamic string. (unplugin-icons only resolved icons at build time)

The workarounds for this is:

<IconA v-if="cond1"/> 
<IconB v-else-if="cond2"/>
<IconC v-else-if="cond3"/>
<IconD v-else />

Or

<script setup>
import MdiAlarm from '~icons/mdi/alarm'
import MdiAccount from '~icons/mdi/account'

const items = [
{
  name: 'Alarm',
  icon: MdiAlarm,
},
{
  name: 'Account',
  icon: MdiAccount,
}
]
</script>

<template>
  <div v-for="i of items">
    <component :is="i.icon"/>
  </div>
</template>

[husayt]

Along with autoImport one can achieve even more elegant solution. Use the same IconResolver you used in unplugin components:

  AutoImport({
      imports: ["vue"],
      resolvers: [
        IconsResolver({
          componentPrefix: "icon",
          enabledCollections: ["carbon", "mdi"],
        }),
      ],
      dts: "src/auto-imports.d.ts",
    }),

Then you don't need to even import and the above will look like this:

<script setup>
const items = [
{
  name: 'Alarm',
  icon: IconMdiAlarm,
},
{
  name: 'Account',
  icon: IconMdiAccount,
}
]
</script>

<template>
  <div v-for="i of items">
    <component :is="i.icon"/>
  </div>
</template>