Menu

Post image 1
Post image 2
1 / 2
0

Stop shipping 1,300 icons when you only use 12 — icon tree-shaking for Ionic + Vite

DEV Community: vite·Dominic Jean·3 days ago
#fz5ekx4L
Reading 0:00
15s threshold

If you use @ionic/core with Vite, you've probably hit this at some point: your build output contains a svg/ folder with every single Ionic icon — all ~1,300 of them — even though your app only uses a dozen. This happens because Ionic registers icons at runtime by name ( <ion-icon name="add-outline" /> ), so bundlers have no idea which SVG files to keep and which to drop. I built vite-plugin-ionic-icons to fix exactly that. What it does Build mode — scans your source files for every <ion-icon name="..."> usage across all frameworks, then emits only those icons as build assets. If you use 12 icons, you ship 12 SVG files. Dev mode — serves icons on-demand directly from node_modules via a middleware. No copying, instant startup.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More