components.d.ts path error if the name startswith prefix defined in collections

genffy commented 7 months ago

Describe the bug

When use ViteComponents and IconsResolver, and if the component name include the string that is defined in colloections(default is icon-sets.json), and the components.d.ts file will get error path.

eg: LayoutHeader => LayoutHeader: typeof import('~icons/la/yout-header')['default'] Circle: typeof import('~icons/ci/rcle')['default'] Because the la and ci are all both included by icon-sets prefix

The mini reproduction is a nuxt3 example.

Reproduction

https://stackblitz.com/edit/nuxt-starter-mrqmcy?file=components.d.ts

System Info

System:
    OS: macOS 14.0
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Memory: 21.04 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 3.6.1 - ~/.nvm/versions/node/v18.17.0/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 8.6.7 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 118.0.5993.117
    Safari: 17.0

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.

stackblitz[bot] commented 7 months ago

Start a new pull request in StackBlitz Codeflow.

nuxt-starter-mrqmcy (Open reproduction)

userquin commented 7 months ago

add prefix

genffy commented 7 months ago

add prefix

The option of componentPrefix was well worked for demo, but not suitable for real app.

userquin commented 7 months ago

componentPrefix is there to solve these type of problems, any ui library should add a prefix to avoid collisions, if you're removing that prefix when using this library, how do you expect us to be able to detect a collision here?

For example, if you add Vuetify and you use VXXX in your component names, it is not a Vuetify bug when using Vuetify resolver, change your component names (in this example the components have a fixed name, here, we expose componentPrefix to allow dynamic names/prefix from configuration).

Take a look at any ui resolver in unplugin-vue-components

genffy commented 7 months ago

@userquin the prefix cannot solve the this issue(nuxt3) scenario, especially the app with a large number of components, it can't exclude multiple icon-sets.

Actually the options of enabledCollections can worked, and set some of what you used icon prefix, but its should not be too simple like la, fa...

The another solution is add strict option, when set true to force strict matching with - suffix for all collections. The main change is on this https://github.com/unplugin/unplugin-icons/pull/327/files#diff-0d2f46f3b329944abf82b98bdebe5220e48742c8868011ed9b35b592f72b0fedR112

userquin commented 7 months ago

What do you mean? you only need to remember to not including components starting with I in your components folder.

If that's a problem, you can use UnoCSS Icons Preset, you don't need any vue component, just use css classes (you also have UnoCSS integration for Nuxt ).

unplugin / unplugin-icons