All icons loaded, one request each

[andrejohansson]

I'm using roughly 10-15 of the icons as can be seen in this picture:

I'm importing them like this:

import { Icon, Home } from 'svelte-hero-icons';

And using them like this: I'm importing them like this:

<Icon src={Home} solid class="flex-shrink-0 h-5 w-5" />

But for some reason it seems that all icons in the package gets loaded, using one request per icon which very much unnecessary work for something not being used.

Is this expected behaviour? Can I do something to prevent this?

I'm using

"svelte-hero-icons": "^4.0.3",

and using optimizeDeps just causes the error mentioned in #18

[JustinVoitel]

Have you installed the package as dependency or devDependency ?

[andrejohansson]

As a devDependency!

[JustinVoitel]

@andrejohansson Seems like something has changed on the SvelteKit or vite side where devDependencies aren't automatically optimized anymore.

I have already fixed it in @steeze-ui/icons where now every Icon Source is bundled in 1 big index.js which fixes the import waterfalls and code splits in production builds.

When I have some time I'll change it in this package aswell!

[andrejohansson]

Much appreciated!

[JustinVoitel]

@andrejohansson now improved in 4.1.0