bsky-social-app/scripts/icons

Icon codegen

SVG files under assets/icons/ are the source of truth. Generated components under src/components/icons/ are committed so icon changes stay visible in review.

Workflow

1. Name the SVG after its exact TypeScript export, for example ArrowTop_Stroke2_Corner0_Rounded.svg. Files in ui/ must use a semantic name followed only by style tokens and include Filled or StrokeN, CornerN, and Rounded. Brand and community marks are exempt because their public names are not UI-style variants.
2. Put it in the directory whose policy it needs:
   • ui/ — strict monochrome icons; exactly one optimized path
   • brands/ — brand marks that may preserve multiple paint roles or basic shapes
   • community/ — third-party marks
   • custom/ — raw assets, including multi-path exceptions, that are optimized but not component-generated
   • flags/ — runtime assets, excluded from codegen and optimization
3. Run pnpm icons:generate and commit both the SVG and generated TypeScript.

pnpm icons:check verifies that optimized SVGs and generated TypeScript are current. pnpm icons:test runs the focused generator tests. pnpm icons:optimize remains an alias for generation during the workflow transition. Generation warns, but does not fail, when a generated icon uses a viewBox other than 24×24 or 64×64.

Output grouping

Grouping has no per-icon manifest. The generator removes style suffixes, tokenizes semantic names, buckets them by the first token, and uses the longest shared token prefix as the module family. A singleton uses its complete semantic name. Brand and community modules remain in their own namespaces.

When an existing application import points at an older module, codegen emits a deprecated constant alias at that path. This preserves component identity while making the canonical import visible to editors. Run pnpm icons:generate -- --verbose to list the remaining deprecated imports and their locations.