Open bbugh opened 8 months ago
Start a new pull request in StackBlitz Codeflow.
it seems another problem, we're using camelToKebab and the resolver should be fine:
Hey @userquin. Your example shows you accidentally passing kebab case in to camelToKebab
. If you pass the actual camel case in, you can see the issue reproduced.
I don't believe the problem is the conversion back from camel case, it's the conversion from kebab case to camel case. It is losing precision in the conversion process because camelCase doesn't have a separator that can delimit sequential numbers.
I just upgraded from 0.16.5 to 1.17.1 and got errors for any icons containing : such as
<icon-heroicons-outline:terminal
[unplugin-icons] Could not load ~icons/heroicons/terminal (imported by src/components/mycomponent.vue?vue&type=script&setup=true&lang.ts): Icon heroicons/terminal
not found
@bloc/frontend:preview: error during build:
@olemarius can you fork this SB repro https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/userquin/docs-add-stackblitz-links/examples/vite-vue3 and add a reproduction?
EDIT: I guess we also need to fix the compiler.
@olemarius can you fork this SB repro https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/userquin/docs-add-stackblitz-links/examples/vite-vue3 and add a reproduction?
EDIT: I guess we also need to fix the compiler.
Thanks, managed to track down what caused it. Seems to be the componentPrefix: 'icon',
option here:
https://stackblitz.com/edit/unplugin-unplugin-icons-8kzqtn?file=vite.config.ts
@olemarius you've installed heroicons
, install heroicons-outline
instead
or use icon-heroicons:command-line
:
In the meantime, import the icon manually: https://stackblitz.com/edit/unplugin-unplugin-icons-g3be2f?file=App.vue
it seems a problem with unplugin-vue-components and/or unplugin-auto-import
Yea I can always apply a refactor/workaround to fix the problem, but it's a huge project where we use a lot of different icons and they've worked fine before. So I wouldn't expect regressions from upgrading unplugin-icons. To me it seems like the rewrite of : to - is somehow not playing nicely when the componentPrefix option is used.
@olemarius I'll try to fix the problem, or add an option to enable old :
behavior if cannot be fixed here
I'm confused about this thread as it doesn't seem like the conversation happening now is related at all to the original issue I reported above.
@bbugh upps, you're right, checking your use case... I'll remove this issue from the PR
@bbugh it seems a problem with unplugin-vue-components/unplugin-auto-import
, adding this importPathTransform
hook to the Components
plugin works:
Components({
dts: true,
importPathTransform(path) {
return path === '~icons/fluent/speaker224-regular' ? '~icons/fluent/speaker2-24-regular' : path
},
resolvers: [
IconsResolver({
alias: {
park: 'icon-park',
},
customCollections: ['custom', 'inline'],
}),
],
}),
Ahhh, thanks for the workaround! That's helpful.
<icon-mingcute-calendar-2-line/>
Icon `mingcute/calendar2-line` not found
Describe the bug
After looking at the code for a while, I'm fairly certain it's caused by one of the name resolvers converting the component name into camel case and then at some point the name is converted back to kebab.
I dug through the code for a while see where this is happening and I couldn't find the source; everywhere I looked it was already converted to camel case.
For example, when importing
An error is thrown:
This should be
fluent/speaker-2-24-regular
.Importing via direct import works fine:
Reproduction
https://stackblitz.com/edit/vue3-script-setup-with-vite-fasbhc?file=src%2FApp.vue,vite.config.js
System Info
Used Package Manager
pnpm
Validations