feat(icon): add icon token registry + pipeline + export (UI Kit 5.0)#30
Closed
Gr1dlock wants to merge 1 commit into
Closed
feat(icon): add icon token registry + pipeline + export (UI Kit 5.0)#30Gr1dlock wants to merge 1 commit into
Gr1dlock wants to merge 1 commit into
Conversation
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>
Contributor
Author
|
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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-offweight4/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 3→shield-3,_dollar→dollar,_coins/coinsmerged).tokens/formats/icons.ts+tokens/build/icons.ts— emitbuild/web/nucleus-icons.json(token → { path, size }) and copy present SVG sources tobuild/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 intotokens/definitions/icon/svg/. RequiresFIGMA_TOKEN.index.d.tsgains anIconTokenliteral union; web packagefilesnow publishesicons/**.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 runningnpm run fetch:iconswith 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:checkall pass (build reports558 missinguntil the export runs).Follow-ups
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