Icons({ autoInstall: true }) not Working in Nuxt 3 Layer

[NisuSan]

Describe the bug

I'm encountering an issue with unplugin-icons in my Nuxt 3 project. When I set Icons({ autoInstall: true }), it doesn't work as expected. Instead, I receive the following error:

Failed to resolve component: Fa6RegularCircleStop
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from 'unplugin-icons/resolver'
import { localPath } from './utils'

export default defineNuxtConfig({
  build: {
    transpile: [
      '@juggle/resize-observer',
      ...(process.env.NODE_ENV === 'production' ? [
        'naive-ui',
        'vueuc',
        '@css-render/vue3-ssr',
        '@hapi',
        '@sideway'
      ] : [])
    ]
  },
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss', 'nuxtjs-naive-ui', 'unplugin-icons/nuxt'],
  vite: {
    optimizeDeps: {
      include: process.env.NODE_ENV === 'development' ? [
        localPath('./node_modules/naive-ui'),
        localPath('./node_modules/vueuc')
      ] : [],
    },
    ssr: {
      noExternal: ['naive-ui']
    },
    plugins: [
      AutoImport({ imports: [{ 'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'] }] }),
      Components({ resolvers: [NaiveUiResolver(), IconsResolver()] }),
      Icons({ autoInstall: true })
    ]
  },
  tailwindcss: {
    cssPath: ['./assets/tailwind.css', { injectPosition: 'first' }],
    exposeConfig: { level: 4, alias: '#tw' }
  },
})

Reproduction

https://github.com/NisuSan/base-nuxt-layer

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i3-10100 CPU @ 3.60GHz
    Memory: 5.88 GB / 15.90 GB
  Binaries:
    Node: 22.3.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (130.0.2849.46)
    Internet Explorer: 11.0.22621.3527

Used Package Manager

pnpm

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.

[userquin]

Add I prefix to the component: <IFa6RegularCircleStop/>

[NisuSan]

@userquin it's worked, thanks! I think it should be mention in docs, so I can start a PR with docs update

[userquin]

There is no need, already mentioned here https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#name-conversion