One component per icon, except when that is the wrong shape
Eight framework packages are generated from the same geometry, and six of them ship 1,756 components. Svelte and Angular ship one. That split is not a preference, it comes out of what those two compilers do to a file.
The default is a component per icon
React, React Native, Vue, Preact and Solid each get one module per glyph. A component in those frameworks is a function, the module graph does the tree shaking, and importing two icons pulls in two icons.
The numbers back it up. One React icon is 492 bytes minified and brotlied. Twelve, which is roughly what a real interface uses, come to 2.22 kB. The whole barrel is 281.88 kB, and you only pay that if you genuinely import all 1,756.
Where that breaks
A Svelte component is a file the bundler compiles. An Angular component is a template and a decorator the compiler works through. Shipping 1,756 of either means 1,756 compilations in the build of a project that imports three of them.
So those two targets keep the icons as plain data and ship a single component that takes one as a prop. The call site changes shape, which is the honest cost of the decision.
<House size={20} />
<SketchyIcon img={House} size={20} />What each shape weighs
Measured with size-limit, one icon, minified and brotlied, with the framework itself excluded.
| package | one icon | shape |
|---|---|---|
| @sketchyicons/react | 492 B | one per icon |
| @sketchyicons/react-native | 744 B | one per icon |
| @sketchyicons/vue | 466 B | one per icon |
| @sketchyicons/preact | 467 B | one per icon |
| @sketchyicons/solid | 740 B | one per icon |
| @sketchyicons/svelte | 268 B | icons as data |
| @sketchyicons/angular | 1.18 kB | icons as data |
| sketchyicons | 450 B | one per icon |
Svelte at 268 bytes is the lightest of the ten packages, and it is lightest precisely because its component gets compiled into your build rather than shipped from ours. Angular at 1.18 kB is the heaviest for the mirror reason: the component travels with the icon, and Angular components are not small.
One generator, eight templates
All of it comes off @sketchyicons/data, which holds the drawn geometry and nothing else. A framework package is a template over that file, so a fix to the geometry lands in every target at once and no target can drift from another.
Adding a ninth is a template and a size budget, not a design decision. If yours is missing, the packages page shows how the chain fits together.