Why an icon library doesn't have to bloat your bundle
Tree-shaking is why a GeoIcons install can hold 799 icons, the count at the time of this post and still growing, while your app ships three. When you write: import { Us } from ' @geoicons/react/countries ' your bundler includes the Us component and drops the rest. You pay for what you import, not for what the package contains. That sentence hides a lot of moving parts. Bundlers only drop code…
Tree-shaking is a technique that eliminates dead code from JavaScript modules, allowing bundlers like webpack, Rollup, esbuild, and Vite to include only what is actually used in the final bundle. This process works when libraries use named exports, ship ES modules, and are side-effect free. Icon libraries such as GeoIcons can benefit from tree-shaking, enabling apps to include only the icons they use.
GeoIcons achieves this by providing each icon with its own named export in an ES module, without using a central registry or dynamic member access. This allows the bundler to easily identify unused icons, resulting in smaller bundle sizes. To verify these benefits, developers can use a bundle analyzer tool, such as @next/bundle-analyzer, to inspect the actual bundle shipped with their application.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
