Lots of separate requests when using lucide-solid during devmode

I tried to use lucide-solid, and it works as expected. My problem is that it downloads each icon JSX file separately during development, slowing down the initial page load, and completely "ruining" the Network view:
...
arrow-down-circle.jsx 304 script aliases.ts:138 145 B 591 ms
arrow-left-circle.jsx 304 script aliases.ts:141 145 B 591 ms
...
...
arrow-down-circle.jsx 304 script aliases.ts:138 145 B 591 ms
arrow-left-circle.jsx 304 script aliases.ts:141 145 B 591 ms
...
Is there a way to load all icons at once during development? I tried some recommendations like
optimizeDeps: {
include: ["lucide-solid"],
}
optimizeDeps: {
include: ["lucide-solid"],
}
but none worked. Thanks.
3 Replies
oke
oke2d ago
This is a problem with Vite and Lucide Icons when you do named imports. This happens in tabler icons too The doc actually has a section that calls this out: to improve Vite dev server performance, import directly from "lucide-solid/icons" folder https://lucide.dev/guide/packages/lucide-solid
Lucide
Lucide Icons
Beautiful & consistent icon toolkit made by the community.
oke
oke2d ago
So you should import directly the icons you need. Or use solid-icons

Did you find this page helpful?