How to generate design tokens from glyph inspector output
- Step 1Walk the GlyphSet — Parse the font with opentype.js, iterate font.glyphs, capture name + unicode + path data per glyph with a unicode value.
- Step 2Format as design tokens — Output JSON in the W3C Design Tokens format: { 'icons': { 'home': { '$value': '\\e001', '$type': 'string' }, ... } }. Style Dictionary consumes this directly.
- Step 3Wire into prebuild — Add to package.json scripts: 'tokens:icons': 'node scripts/icon-tokens.mjs'. Re-run on font updates; commit the tokens JSON for downstream consumers.
Frequently asked questions
What if the font has no glyph names?+
Fall back to Unicode-based names (icon-e001, icon-e002, etc.). Designers prefer human-readable names — work with whoever ships your icon font to add them via the post table.
Can I generate React components?+
Yes — extend the script to emit one .tsx per icon with the glyph's SVG path inlined. Skip the icon font entirely; ship pure SVG components. Modern design systems prefer this for tree-shaking.
How do I version the tokens?+
Hash the source font's bytes; use that as the tokens file version. Consumers see when icons changed by checking the version. Reproducible across machines.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.