Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project is loading all icons despite only using two. #823

Closed
JustBarnt opened this issue Oct 18, 2022 · 13 comments
Closed

Project is loading all icons despite only using two. #823

JustBarnt opened this issue Oct 18, 2022 · 13 comments
Labels
🐛 bug Something isn't working

Comments

@JustBarnt
Copy link

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
    image
@JustBarnt JustBarnt added the 🐛 bug Something isn't working label Oct 18, 2022
@ericfennis
Copy link
Member

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

@JustBarnt
Copy link
Author

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

@JustBarnt
Copy link
Author

@ericfennis any luck duplicating this?

@ericfennis
Copy link
Member

@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
Copy link
Author

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

@ericfennis
Copy link
Member

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
Copy link
Member

I will do some more research

@JustBarnt
Copy link
Author

JustBarnt commented Oct 23, 2022

@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
Copy link
Member

@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.

@ericfennis ericfennis closed this as not planned Won't fix, can't repro, duplicate, stale Nov 6, 2022
@ryu-man
Copy link

ryu-man commented May 14, 2023

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

@siddarthvader
Copy link

having same issue, any update on this?

@Serpentarius13
Copy link

Serpentarius13 commented Jan 9, 2024

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants