Project is loading all icons despite only using two.

[JustBarnt]

Prerequisites

• Version: 0.91.0
• Are you running from source/main: Yes
• Are you using a released build: Yes
• Operating system: Windows
• Bits: 64

Step to reproduce

Install package. I installed the Svelte version. I imported ChevronUpDown in one file and Info in another. Upon refreshing the page it takes upwards of 5-8 seconds with HMR. Inside the network tab in my dev tools I can see every icon being retrieved with a 200 success status instead of just the two I am using.

Actual behavior

I would expect it to only load the icons I am using.

Any message or error

(Type here)

Resources

• Code

//Example of using Info Icon
<script>
import {Info} from "lucide-svelte"
</script>
<label class="form-label" style="grid-area: 3/1/4/5" for="product">
    <span>
        Product:
	<Info size={16} strokeWidth={2} />
    </span>
    <input class="input" type="text" placeholder="EX: CLIPS" name="product" />
</label>

• Screenshot of network tab

[ericfennis]

Hmm interesting. What kind of build tool do you use? So I can reproduce the issue. Thanks for reporting.

[JustBarnt]

@ericfennis I am using Vite 3 which is the standard build tool with svelte.

[JustBarnt]

@ericfennis any luck duplicating this?

[ericfennis]

@JustBarnt yes I was able to replicate this. Not sure what is happening. Vite is importing everything from the index file. I dont understand how the tree shaking is working. I need to check other frameworks as well in vite.

[JustBarnt]

@ericfennis I can look into seeing how vite does treeshaking as well, maybe I can find a solution and give you an update.

[ericfennis]

I've checked other frameworks, but Svelte is the only one that imports each file separately. Other frameworks also loading all the icons but it imports it in one file. On dev mode in vite it doesn't tree-shake. I think maybe has something to do with the .svelte file loader in vite.

[ericfennis]

I will do some more research

[JustBarnt]

@ericfennis Yeah I did some searching to found out that people were using optimizedDeps: { disabled: false} and a lot of people were saying it started tree-shaking but it doesn't seem to work for me.

[ericfennis]

@JustBarnt Thanks for opening issue in vite repo. The reply in vitejs/vite#10742 by @sapphi-red is the answer for this issue. I can't affect the way vite is loading the imports in the index file in dev mode. See issue in vitejs/vite#8237.

[ryu-man]

Hi @JustBarnt, have yfound a workaround for the issue?

[siddarthvader]

having same issue, any update on this?

[Serpentarius13]

If anyone's still having issues (I guess you do, because I did), this article helped: https://christopher.engineering/en/blog/lucide-icons-with-vite-dev-server/

So, basically we need to create alias in vite.config.ts (author uses solid, we use svelte):

resolve: {
			alias: {
				'lucide-svelte/icons': fileURLToPath(
					new URL('./node_modules/lucide-svelte/dist/icons', import.meta.url)
				)
			}
		}

Then we need d.ts file for TypeScript, again for Svelte:

declare module 'lucide-svelte/icons/*' {
	import type { IconProps } from 'lucide-svelte/dist/types';
	import type { SvelteComponent } from 'svelte';
	const cmp: SvelteComponent<IconProps>;

	export = cmp;
}

And then we can import icons like that:

import AwardIcon from 'lucide-svelte/icons/award.svelte';

Fixed for me

[Christopher2K]

@Serpentarius13 Glad I was able to help!!!!!!!!!!!