[Help wanted] Issue with AutoImport and @iconify/vue in Vue Project

[toimc]

Describe the bug

First of all, I want to express my gratitude to the developers for their hard work on this project. Thank you!

I'm currently using the @iconify/vue library, which exports an Icon Vue component. I'd like to leverage the AutoImport library's imports feature to simplify the import process. Here's the relevant part of my code:

vite.config.ts:

AutoImport({
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/,
    /\.vue\?vue/, // .vue
    /\.md$/ // .md
  ],

  // global imports to register
  imports: [
    // presets
    'vue',
    // 'vue-router'
    VueRouterAutoImports,
    '@vueuse/core',
    
    // Issue here
    { '@iconify/vue': ['Icon', 'addAPIProvider'] }
  ],
  resolvers: [ElementPlusResolver()],
  vueTemplate: true
})

However, even with this setup, I'm facing an issue. When I try to use the Icon component directly in a Vue template like this:

<Icon icon="ep:plus"></Icon>

It doesn't work as expected. I still have to manually import it in the script section like so:

<script setup lang="ts">
import { Icon } from '@iconify/vue'
</script>

This issue has been bothering me for quite some time, and I would greatly appreciate any guidance or solutions you can provide. Thank you in advance for your assistance!

Update:

It's quite peculiar; if I use dynamic components like this:

<component :is="Icon" icon="ep:plus"></component>

It renders correctly.

Reproduction

https://stackblitz.com/edit/vitejs-vite-gsph2u?file=src%2FApp.vue

System Info

System:
    OS: macOS 13.5.1
    CPU: (10) x64 Apple M1 Max
    Memory: 26.61 MB / 64.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    pnpm: 8.7.1 - ~/.nvm/versions/node/v18.15.0/bin/pnpm
  Browsers:
    Chrome: 116.0.5845.179
    Safari: 16.6

Used Package Manager

npm

Validations

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

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-gsph2u (Open reproduction)