How one engineer structured 7,798 React icon components to load only what you import
Design engineer James Coombs built an icon package used across roughly twenty frontend apps, with its largest set containing 7,798 generated React components as of August 2026. The core challenge was ensuring that importing a single icon never forces a consumer's build to process the remaining thousands. To achieve this, Coombs avoided the conventional barrel file approach, where a single index.ts re-exports everything, because at this scale it slows cold builds and hot reloads regardless of tree-shaking. Instead, each icon is its own standalone module of about 900 bytes, with a wildcard entry in the package's exports map allowing clean deep imports that resolve to exactly one file on disk. This architecture makes the bundler's job straightforward, since it is never handed the full icon set as a unit and has no reason to traverse components that were not explicitly requested.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in