Comments (15)
Start a new pull request in StackBlitz Codeflow.
from unplugin-icons.
it seems another problem, we're using camelToKebab and the resolver should be fine:
from unplugin-icons.
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.
from unplugin-icons.
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:
from unplugin-icons.
@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.
from unplugin-icons.
@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
from unplugin-icons.
@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
from unplugin-icons.
it seems a problem with unplugin-vue-components and/or unplugin-auto-import
from unplugin-icons.
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.
from unplugin-icons.
@olemarius I'll try to fix the problem, or add an option to enable old :
behavior if cannot be fixed here
from unplugin-icons.
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.
from unplugin-icons.
@bbugh upps, you're right, checking your use case... I'll remove this issue from the PR
from unplugin-icons.
@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'],
}),
],
}),
from unplugin-icons.
Ahhh, thanks for the workaround! That's helpful.
from unplugin-icons.
<icon-mingcute-calendar-2-line/>
Icon `mingcute/calendar2-line` not found
from unplugin-icons.
Related Issues (20)
- ID collisions in astro HOT 1
- `resolveId` doesn't work as expected when query params contains `.`s HOT 1
- components.d.ts path error if the name startswith prefix defined in collections HOT 6
- Vue 2 examples won't run
- Events don't fire in Vue 2 HOT 5
- How to use the icon's raw svg as url(data:....) in css? HOT 5
- How to auto import unplugin-icons ? HOT 2
- How to auto import icon set with plural names? HOT 7
- Symptom When the icon is imported automatically, an error message is displayed indicating that the icon version does not match
- Unable to use ?raw in SvelteKit HOT 3
- Hydration mismatch warning in vue >=3.4 (nuxt >=3.9) if an SVG uses `url(#id)` HOT 5
- Svelte 5 runes mode not working HOT 4
- Qwik type definitions are not exported in package.json HOT 1
- I import icons dynamically in Svelte? HOT 1
- About icon aspect ratio
- Vue error when using vue-tsc - Type '{}' is not assignable to type 'ComponentProps<string>' HOT 7
- An issue for vue2(<2.7) compiler with "transpile is not a function" HOT 9
- Slow Performance with Svelte 5 HOT 10
- Support for Yarn PnP HOT 6
- Type error when add custom Iconify IconSet customCollections
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from unplugin-icons.