Replies: 13 comments 23 replies
-
I noticed this as well and I do believe it's from lucide-svelte, but if you build it and run the production build it loads in quick/just fine. It seems to just be a dev thing. What I ended up doing is just uninstalling lucide-svelte and making my own components from the SVGs when/where I needed them. A bit annoying, but oh well. If you go that route though there are quite a few components that have dependencies from radix-icons-svelte that you will have to fix as well. |
Beta Was this translation helpful? Give feedback.
-
Yeah it's likely the optimization of the icons. It should cache so once you deal with the slowness at first it'll speed up |
Beta Was this translation helpful? Give feedback.
-
I think this speed issue results in a bad developer experience. We could remove the index file and import the icon components individually; and add a note in docs letting people know why this is done and also that they can create their own index file (only for the icons that they use). This solution may be making DX bad by asking devs to do more work, however I think the speed issue is worse and it can result it a worse DX. Note on removing the index file, I think it should be removed because users may use it without knowing the cons and think that something is wrong with the library... I think this issue needs to be resolved even with the caching feature and considering that the issue doesn't exist in production. UPDATE: Maybe it's a good idea to take a look into how other frameworks are solving this issue. |
Beta Was this translation helpful? Give feedback.
-
Right now I can't even import the component directly from lucide, which is an issue. Definitely not creating a bunch of SVGs either. if they don't enable us to resolve, then we'll switch to something like this: https://github.com/shinokada/svelte-lucide which appears to have accomplished what the original has not. |
Beta Was this translation helpful? Give feedback.
-
For the demo on the left side, I wrote a script that removed the import code for the unused icons from the index file (for both of the icon libraries). Rec.0024.mp4
|
Beta Was this translation helpful? Give feedback.
-
Maybe use mdi icons instead? |
Beta Was this translation helpful? Give feedback.
-
Can I create a library myself for lucide icons, and create a PR for replacing the libraries? I can do the same for melt-ui too since it suffers from the same issue too. I made this library for another icon library for the same reasons:
|
Beta Was this translation helpful? Give feedback.
-
You guys not using https://github.com/unplugin/unplugin-icons ? |
Beta Was this translation helpful? Give feedback.
-
can i not just uninstall lucide or is it used internally? |
Beta Was this translation helpful? Give feedback.
-
Uhm, Maybe replace |
Beta Was this translation helpful? Give feedback.
-
Hello! E.g on my page I'm just using the import { Button } from "$lib/components/ui/button"; Which makes the import from bits ui like this: import { Button as ButtonPrimitive } from 'bits-ui' That instructs vite to process the whole 3.2Mb lib, as shown: Worth noting this issue doesn't happen in production builds, where the imports are correctly tree-shaken. @huntabyte any chance to allow direct imports from bits-ui? So we can do something like import ButtonPrimitive from 'bits-ui/button'` |
Beta Was this translation helpful? Give feedback.
-
One of the solutions I came up with is using svelte-fa for FontAwesome Icons and after adding a component to my project for shadcn-svelte, I replace the lucide icon with the corresponding one from svelte-fa. Easy fix without needing to manually create a bunch of different icons |
Beta Was this translation helpful? Give feedback.
-
FWIW, deleting everything under |
Beta Was this translation helpful? Give feedback.
-
Is it because of
lucide-svelte
? I installedButton
,DropdownMenu
and the reload speed went from x/ms to a few seconds :|Beta Was this translation helpful? Give feedback.
All reactions