How to automate svg data uri generation for css build pipelines
- Step 1Install postcss-inline-svg — npm install --save-dev postcss-inline-svg. This PostCSS plugin replaces inline-svg('path/to/icon.svg') CSS references with encoded data URIs at build time.
- Step 2Configure your PostCSS pipeline — In postcss.config.js: plugins: { 'postcss-inline-svg': { paths: ['./src/icons'] } }. Reference SVGs as: background-image: inline-svg('search.svg').
- Step 3Or use the JAD batch API — POST multiple SVGs to /api/svg/to-code with format: css. The response includes CSS custom properties using data URIs for each icon.
Frequently asked questions
What is postcss-inline-svg?+
postcss-inline-svg is a PostCSS plugin that reads SVG files from your filesystem and replaces inline-svg() CSS references with URL-encoded data URIs at build time, with support for colour customisation.
Can I parameterise colors in a data URI SVG?+
Yes. postcss-inline-svg supports color parameters: inline-svg('icon.svg', fill: #ff0000). This modifies the SVG fill attribute before encoding.
Should I commit the generated CSS to version control?+
Commit the source SVGs, not the generated CSS. Generate data URIs at build time. Committing generated CSS creates large diffs on every SVG change.
Does the JAD API support batch CSS output?+
Yes. Post multiple SVG files with format: css and the API returns a CSS file with --icon-[name]: url data URI custom properties, plus a helper class for each icon.
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.