Automate CSS Custom Property Injection Across SVG Libraries

Convert a Style Dictionary colour map to variableMap

Flatten a hex→token object into the "#hex:--token" string array the tool expects.

const tokens = {
  "#003082": "--color-brand-primary",
  "#e02d3c": "--color-brand-accent",
  "#1a1a2e": "--color-surface"
};
const variableMap = Object.entries(tokens)
  .map(([hex, name]) => `${hex}:${name}`);
// ["#003082:--color-brand-primary", ... ]

POST one SVG to the local runner

The public API returns pairing instructions; the runner on localhost does the work. Artwork stays on your machine.

curl -s http://127.0.0.1:9789/v1/tools/svg-css-variable-injector/run \
  -H 'content-type: application/json' \
  -d '{
        "input": "<svg viewBox=\"0 0 24 24\"><path fill=\"#003082\" d=\"...\"/></svg>",
        "options": { "variableMap": ["#003082:--color-brand-primary"] }
      }'

# → <svg ...><path fill="var(--color-brand-primary)" d="..."/></svg>

Batch a whole icon directory

Loop over the library, reuse one map, and write each result back. Deterministic output keeps git diffs clean.

for (const file of glob('icons/**/*.svg')) {
  const svg = read(file);
  const out = await runner('svg-css-variable-injector', {
    input: svg,
    options: { variableMap }
  });
  write(file.replace('icons/', 'icons-themed/'), out);
}

Generate the :root CSS from the same map

The tool doesn't emit CSS, so derive it from your token map — single source of truth, no drift.

const css =
  ':root {\n' +
  Object.entries(tokens)
    .map(([hex, name]) => `  ${name}: ${hex};`)
    .join('\n') +
  '\n}\n';
write('tokens.css', css);
// :root { --color-brand-primary: #003082; ... }

CI sync step on token changes

Re-run injection whenever the token file changes and open a PR with the regenerated SVGs + CSS together.

# .github/workflows/theme-sync.yml (sketch)
on:
  push:
    paths: ['tokens/colors.json']
jobs:
  inject:
    steps:
      - run: node scripts/inject-svg-vars.js   # uses the runner
      - run: node scripts/emit-tokens-css.js
      - uses: peter-evans/create-pull-request@v6

POSTing content to https://…/api/v1/tools/svg-css-variable-injector/run intentionally returns HTTP 400 with runnerEndpoint, schemaEndpoint, and installRunner fields. JAD's API never accepts uploads — point your loop at the local runner on 127.0.0.1:9789 instead.

An entry whose hex doesn't appear in the SVG simply matches nothing — no error, no change. Useful for a shared map across heterogeneous icons, but it means a typo'd hex fails silently. Diff the output to confirm replacements landed.

The engine expands your supplied hex (#03f→#0033ff) but compares against the raw SVG text. If the file stores #03f, a #0033ff map entry won't match it. Normalise source SVGs to 6-digit hex (e.g. through svg-hex-swapper) as a pre-step in the pipeline.

Because any variableMap entry turns off auto-detect, colours absent from your map are left as literal hex. This is correct for protecting fixed brand colours, but it means an incomplete map yields partially-themed icons. Validate that every intended colour is in the map.

The injector targets #hex only. Icons using fill="red" or rgb(...) won't be parameterised. Add a normalisation pass before injection, or exclude those assets and handle them separately.

The run output is the rewritten SVG text — there is no generated .css in the response. Your pipeline must emit :root declarations from the token map (see the cookbook). Treat the token map as the single source for both the SVG injection and the CSS.

If two semantically different colours happen to share a hex (#000000 used for both text and a border), a single map entry rewrites both to the same variable. The tool can't distinguish intent — disambiguate at the design-token level before injecting.

The schema GET is rate-limited per API key. In a large batch, fetch the schema once and cache it; the per-file work goes to the local runner, which is not rate-limited by JAD. Respect the X-RateLimit-* headers on the schema call.