Skip to content

feat(icon): add icon token registry + pipeline + export (UI Kit 5.0)#30

Closed
Gr1dlock wants to merge 1 commit into
feat/component-button-tokensfrom
feat/icon-tokens
Closed

feat(icon): add icon token registry + pipeline + export (UI Kit 5.0)#30
Gr1dlock wants to merge 1 commit into
feat/component-button-tokensfrom
feat/icon-tokens

Conversation

@Gr1dlock
Copy link
Copy Markdown
Contributor

@Gr1dlock Gr1dlock commented Jun 2, 2026

Stacked on #29#27. Review/merge those first; base retargets to main after.

What

Adds the full icon token system from the UI Kit 5.0 Iconography page: 187 icons × weights (dynamic/regular/solid, plus a few one-off weight4/disabled/growth) = 561 tokens. Wire token format: icon.{name}.{weight} (e.g. icon.arrow-right.regular).

How it works

  • tokens/definitions/icon/icons.json — the registry (name → weight → Figma node id), source of truth + export manifest. Names normalized to kebab-case (shield 3shield-3, _dollardollar, _coins/coins merged).
  • tokens/formats/icons.ts + tokens/build/icons.ts — emit build/web/nucleus-icons.json (token → { path, size }) and copy present SVG sources to build/web/icons/{name}/{weight}.svg. Missing SVGs are reported, not fatal.
  • tokens/scripts/fetch-icons.ts (npm run fetch:icons) — batch-exports every icon as SVG from Figma via the Images API into tokens/definitions/icon/svg/. Requires FIGMA_TOKEN.
  • index.d.ts gains an IconToken literal union; web package files now publishes icons/**.

On the SVG assets

arrow-right (all 3 weights) is committed as a worked example so the pipeline is verifiable end-to-end. The remaining 558 SVGs are populated by running npm run fetch:icons with a Figma personal access token — there's no bulk-SVG export available through the design tooling otherwise, so the registry + script are the mechanism. Run it in CI or locally and commit the result (or I can run it if given a token).

npm run build, typecheck, lint, format:check all pass (build reports 558 missing until the export runs).

Follow-ups

  • Native (iOS asset catalog / Android vector drawables) generation — the registry + node ids are platform-agnostic, so a per-platform generator can follow.
  • A couple of names need a design sanity check (badge-not-checked, cellular-no-signal, the _-prefixed aliases).

Part of adopting Nucleus tokens in app-backend SDUI V4 (CTA style.icon).

🤖 Generated with Claude Code

Adds the full icon token system from the UI Kit 5.0 Iconography page: 187 icons
across the dynamic/regular/solid weights (plus a few one-off weight4/disabled/
growth), 561 tokens total.

- tokens/definitions/icon/icons.json — registry (name → weight → Figma node id),
  the source of truth + manifest for export.
- tokens/formats/icons.ts + tokens/build/icons.ts — emit build/web/nucleus-icons.json
  (token → { path, size }) and copy any present SVG sources to build/web/icons/.
  Missing SVGs are reported, not fatal.
- tokens/scripts/fetch-icons.ts (npm run fetch:icons) — batch-exports every icon as
  SVG from Figma via the Images API into tokens/definitions/icon/svg/{name}/{weight}.svg.
  Requires FIGMA_TOKEN.
- index.d.ts gains an `IconToken` literal union (icon.{name}.{weight}).
- web package `files` now publishes icons/**.

Wire token: `icon.{name}.{weight}`, e.g. `icon.arrow-right.regular`.

The arrow-right SVGs (all 3 weights) are committed as a worked example; the
remaining 558 are populated by running `npm run fetch:icons` with a Figma token
(no bulk-SVG export is possible via the design tooling otherwise). Native (iOS/
Android) asset generation is a fast follow.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@Gr1dlock
Copy link
Copy Markdown
Contributor Author

Gr1dlock commented Jun 2, 2026

Superseded by #25 (NucleusIcons by @Priva28), which ships the real SVG assets + iOS/Android/web outputs for all 141 icons × outline/regular/solid. Closing this thinner registry/pipeline PR in favor of #25.

Note for SDUI V4: #25 identifies icons by name + a separate variant and its published web index.d.ts stays Record<string,string>. To give consumers a typed token + a single wire string, we'd want an IconToken literal-union (icon.{name}.{variant}) generated from #25's icon set — happy to fold that into the TS-types PR (#27) or leave it to you.

@Gr1dlock Gr1dlock closed this Jun 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant