Repository navigation
components.d.ts path error if the name startswith prefix defined in collections #326
Description
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.0Used Package Manager
pnpm
Validations
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- The provided reproduction is a minimal reproducible of the bug.
Reacted by EDM115
Activity
bolt-new-by-stackblitz commentedon Nov 15, 2023
[-]render icons path error with path includes prefix in collections[/-][+]components.d.ts path error if the name startswith prefix defined in collections[/+]userquin commentedon Nov 15, 2023
add prefix
genffy commentedon Nov 15, 2023
The option of
componentPrefixwas well worked for demo, but not suitable for real app.userquin commentedon Nov 15, 2023
componentPrefixis 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
componentPrefixto allow dynamic names/prefix from configuration).Take a look at any ui resolver in unplugin-vue-components
genffy commentedon Nov 15, 2023
@userquin the
prefixcannot solve the this issue(nuxt3) scenario, especially the app with a large number of components, it can't exclude multipleicon-sets.Actually the options of
enabledCollectionscan worked, and set some of what you used icon prefix, but its should not be too simple likela,fa...The another solution is add
strictoption, when settrueto force strict matching with-suffix for all collections. The main change is on this https://github.com/unplugin/unplugin-icons/pull/327/files#diff-0d2f46f3b329944abf82b98bdebe5220e48742c8868011ed9b35b592f72b0fedR112userquin commentedon Nov 15, 2023
What do you mean? you only need to remember to not including components starting with
Iin 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 ).