Why Giant icons/index.ts Barrel Files Hurt Dev & Test Speed

When src/components/icons/index.ts re-exports 500 TSX icon modules, importing just one import { SearchIcon } from '@/components/icons' inside a unit test or unoptimized dev boundary can force the module loader to parse all 500 files! Modern Next.js mitigates famous npm packages via experimental.optimizePackageImports, yet internal monorepo barrel files often bypass that list unless configured explicitly.

Three Scalable Patterns for Large React / Next.js Repositories

Subpath package exports in a shared @acme/icons workspace package (zero barrel tax)
{
  "name": "@acme/icons",
  "sideEffects": false,
  "exports": {
    "./*": {
      "types": "./src/icons/*.tsx",
      "default": "./src/icons/*.tsx"
    }
  }
}
// Usage: import { ArrowRightIcon } from "@acme/icons/arrow-right";
  • 1. Direct per-icon subpath imports: Copy only the 30–80 icons your product actually uses from SVG Nexus Developer Docs or SVG to JSX into src/components/icons/{slug}.tsx—zero unused 9,000-icon node_modules weight.
  • 2. Core UI sprite + rare TSX components: Put the 25 icons used on every screen into a cached /sprites/core.svg via the Sprite Generator, and keep feature-specific icons as co-located TSX files.
  • 3. Enforce import hygiene via ESLint: Use no-restricted-imports to prevent teammates from importing the root of multi-thousand-icon packages without subpath resolution.