How to use in h() render?

[seepine]

like this

// import IMdiAccountBox from '?where'

const component = ()=>{
   return h(IMdiAccountBox)
}

[userquin]

import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour' or import MdiStore24Hour from '~icons/mdi/store-24-hour'

[seepine]

thanks, can it support auto-imports?

[seepine]

And i got the type error of typescript.

[userquin]

add types to your tsconfig file

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "unplugin-icons/types/vue",
    ]
  }
}

or add vite-env.d.ts to your src folder and add a triple slash reference:

/// <reference types="unplugin-icons/types/vue" />

Yes you can add auto-imports: check https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#auto-importing

To allow auto-import in js[x]/ts[x] files you will need to add the extension in the unplugin-vue-components plugin:
extensions: ['vue', 'js', 'ts'...] => check https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#configuration

[seepine]

1. Type can be work

/// <reference types="unplugin-icons/types/vue" />

2. Can you confirm where the problem lies?

My vite.config.ts

    vue(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'pinia',
        { 'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar', 'NIcon'] }
      ]
    }),
    Components({
      resolvers: [NaiveUiResolver(), IconsResolver()],
      extensions: ['vue', 'ts']
    }),
    Icons()

And demo.vue

<template>
  ...
</template>
<script setup lang="ts">

function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// vscode show error: Can not fount “MdiStore24Hour”。ts(2304)
const icon = renderIcon(MdiStore24Hour)

// const icon = renderIcon(IMdiStore24Hour) // the same as

</script>