Menu

1 / 2

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

DEV Community: vite·Dominic Jean·5 months 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.…

Continue reading — create a free account

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