Generate Design Tokens from Glyph Inspector Output

The minimal loop that yields the same GlyphRecord shape the browser tool emits, capped at 5,000.

import opentype from "opentype.js";
const font = opentype.loadSync("icons.ttf");
const em = font.unitsPerEm;
const limit = Math.min(font.glyphs.length, 5000);
const U = (cp) => "U+" + cp.toString(16).toUpperCase().padStart(4,"0");
const glyphs = [];
for (let i = 0; i < limit; i++) {
  const g = font.glyphs.get(i);
  let svgPath = "";
  try { svgPath = g.getPath(0, em, em).toPathData(2) ?? ""; } catch {}
  glyphs.push({
    index: i, name: g.name ?? null,
    unicode: g.unicode != null ? U(g.unicode) : null,
    advance: g.advanceWidth ?? null, svgPath,
    viewBox: `0 0 ${g.advanceWidth || em} ${em}`,
  });
}

Keep only named, PUA-encoded icons and write a tokens file Style Dictionary can read. The CSS escape is derived from unicode.

const tokens = { icons: {} };
for (const g of glyphs) {
  if (!g.name || !g.unicode) continue;
  const hex = g.unicode.slice(2).toLowerCase();
  tokens.icons[g.name] = { $value: "\\" + hex, $type: "string" };
}
fs.writeFileSync("icons.tokens.json", JSON.stringify(tokens, null, 2));

// → { "icons": { "home": { "$value": "\\e001", "$type": "string" } } }

Skip the icon font entirely: each record's svgPath + viewBox becomes a tree-shakeable SVG file.

for (const g of glyphs) {
  if (!g.name || !g.svgPath) continue;
  const svg = `<svg viewBox="${g.viewBox}" xmlns="http://www.w3.org/2000/svg">`
            + `<path d="${g.svgPath}"/></svg>`;
  fs.writeFileSync(`icons/${g.name}.svg`, svg);
}

// icons/home.svg, icons/user.svg, ... — no font needed.

Stamp a content hash of the source font into the tokens so consumers detect changes deterministically.

import { createHash } from "node:crypto";
const bytes = fs.readFileSync("icons.ttf");
const version = createHash("sha256").update(bytes)
  .digest("hex").slice(0, 12);
tokens.$meta = { source: "icons.ttf", version };
// Same font in → same version out, on every machine.

If the runner is paired, POST the font to the local endpoint and read back the same JSON the tool produces — processed on the developer's machine, never uploaded.

# Discover the option schema (glyph-inspector has none):
curl http://127.0.0.1:9789/api/v1/tools/glyph-inspector
# (the public schema lists this tool with an empty options array)

# Run it locally against a font file:
curl -X POST \
  http://127.0.0.1:9789/v1/tools/glyph-inspector/run \
  -F file=@icons.woff2
# → <stem>.glyphs.json saved locally by the runner.

The browser tool stops at GLYPH_INSPECT_SAFETY_CAP = 5000. If your Node walk iterates the full font.glyphs.length, your tokens will include glyphs the tool omits — fine if intentional, surprising if you expected byte-for-byte parity. Decide deliberately: cap at 5,000 for parity, or raise it and accept the larger payload for huge fonts.

Each record carries the glyph's primary codepoint, not every codepoint that maps to it. If your token generator assumes one token per codepoint and reads only unicode, aliased codepoints get no token. For exhaustive codepoint coverage, read font.tables.cmap.glyphIndexMap directly rather than relying on the per-glyph unicode.

Calling toPathData on a contour-less or unusual glyph can throw. The inspector wraps it and returns "". Reproduce that guard in your script — without it, one odd glyph (space, a malformed entry) aborts the whole token build instead of yielding an empty path.

If the build strips the post table, g.name is null and name-keyed tokens collapse (multiple null keys, or skipped icons). Detect it up front: if most records have name: null, fail the build with a clear message, or fall back to icon-<hex> names derived from unicode. Confirm with the font-metadata-extractor.

opentype.js parses sfnt (TTF/OTF) directly but not WOFF2/WOFF. If your CI fonts are WOFF2, decompress with wawoff2 (Brotli) first; WOFF needs pako/zlib per table. Without that step, parse throws on the compressed bytes. The browser tool does this decode before parsing — replicate it.

Object-key order, float formatting, or unsorted iteration can make the tokens JSON differ run-to-run, producing noisy diffs. Pin precision to 2 decimals (as the tool does via toPathData(2)), sort keys before serialising, and stamp a font-hash version. Same font in → same JSON out is the goal.

The 127.0.0.1:9789 endpoint only exists when the JAD runner is installed and paired. If it isn't running, the POST fails with a connection refused. Fall back to the in-script opentype walk, or start the runner. The runner path keeps the font local; it isn't a hosted API.

opentype reads default-axis outlines, so a variable icon font yields its default weight's paths. If your tokens need a specific weight, instance the font first (e.g. fonttools varLib.instancer, or the variable-font-freezer) before the walk, or your SVG components will all be the default weight.