How to automate css custom property injection across svg libraries
- Step 1Export your token mapping — From your design token tool (Style Dictionary, Tokens Studio), export a color-to-variable mapping: { '#003082': '--color-brand-primary', '#e02d3c': '--color-brand-accent' }.
- Step 2Run the batch injection API — POST your SVGs and the token mapping to /api/svg/swap-colors with mode: css-variables. The API injects var(--color-brand-primary) in place of each hardcoded color.
- Step 3Generate the CSS variables file — The API response includes a generated.css with :root { --color-brand-primary: #003082; } declarations. Commit this alongside the updated SVGs as the canonical source of truth.
Frequently asked questions
How do I keep SVG variables in sync when design tokens change?+
Add a CI step that runs on token file changes: re-exports the color-to-variable mapping, calls the injection API, and opens a PR with the updated SVGs. This keeps icons in sync automatically.
Can I use the injection API with Tokens Studio for Figma?+
Yes. Tokens Studio exports JSON token files. Write a script to convert the JSON to the JAD injection API's color-map format, then run the batch injection on your SVG library.
Does the API preserve existing CSS variable references?+
Yes. If an SVG already uses var(--color-primary), the API only targets remaining hardcoded color values. Existing variable references are preserved and not overwritten.
What plan is required for the batch injection API?+
The batch CSS variable injection API requires the Developer plan. Single-file injection is available in the browser UI on Pro.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.