Please add to readme file nuxt3 dynamic import

[ozgurkisa]

Please add to readme file nuxt3 dynamic import example:

import { Icon } from "@iconify/vue"

function renderIcon(icon) {
  return () => h(Icon, { icon })
}

renderIcon('uil:github')

[Atinux]

What is the use case?

[ozgurkisa]

How to use Nuxt-Icon in Javascript? I need this to be able to use render. (nuxt h)

For example create a link element in icon:

   h(
      NuxtLink,
            { to: { path: toPath } },
            { default: () =>  h(Icon, { icon })}
     )

[Atinux]

Hi @ozgurkisa

You should be able to do:

<script setup>
import { Icon } from '#components'
const icon = ref('uil:github')

const MyIcon = h(Icon, { name: 'uil:twitter' })
</script>

<template>
  <p><MyIcon /></p>
</template>

I updated the playground: https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue

Can you confirm it works for you?

[ozgurkisa]

Hi @ozgurkisa

You should be able to do:

<script setup>
import { Icon } from '#components'
const icon = ref('uil:github')

const MyIcon = h(Icon, { name: 'uil:twitter' })
</script>

<template>
  <p><MyIcon /></p>
</template>

I updated the playground: https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue

Can you confirm it works for you?

Yes, thank u. It might be good for you to add this to the readme file.

[Atinux]

Done, thank you @ozgurkisa