Automate Batch SVG to React Component Conversion

Discover the contract before you script

Always pull the schema first so you build payloads against the two real options, not assumed ones.

curl -s https://jadapps.com/api/v1/tools/svg-to-jsx \
  -H "Authorization: Bearer $JAD_API_KEY"

# → { slug, options: [
#       { name: 'componentName', type: 'string', ... },
#       { name: 'typescript', type: 'boolean', default: true, ... }
#     ],
#     acceptsMultiple: false,
#     execution: { runnerMode: 'engine' } }

Batch a folder through the local runner (Node)

Loop the folder, PascalCase each filename, POST the SVG text to the paired runner, and write each returned component. Engine-mode means the conversion runs locally — nothing uploads.

import { readdir, readFile, writeFile, mkdir } from 'node:fs/promises';

const SRC = 'src/assets/icons', OUT = 'src/components/icons';
const pascal = s => s.replace(/\.svg$/, '').replace(/[-_.\s]+(.)/g, (_, c) => c.toUpperCase()).replace(/^./, c => c.toUpperCase());

await mkdir(OUT, { recursive: true });
for (const f of (await readdir(SRC)).filter(f => f.endsWith('.svg'))) {
  const name = pascal(f);
  const text = await readFile(`${SRC}/${f}`, 'utf8');
  const res = await fetch('http://127.0.0.1:9789/v1/tools/svg-to-jsx/run', {
    method: 'POST', headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ slug: 'svg-to-jsx', text, options: { componentName: name, typescript: true } }),
  }).then(r => r.json());
  await writeFile(`${OUT}/${name}.tsx`, res.text ?? res.content);
}

@svgr/cli when you need SVGO + forwardRef

The JAD engine doesn't optimise geometry or wrap in forwardRef. If your library standard requires those, @svgr is the right choice — one config, one command.

npm i -D @svgr/cli

# .svgrrc.json
{
  "typescript": true,
  "svgo": true,
  "ref": true,
  "prettier": true,
  "jsxRuntime": "automatic"
}

npx svgr --config-file .svgrrc.json \
  --out-dir src/components/icons src/assets/icons
# → one typed, optimised, forwardRef'd .tsx per .svg

Bake in the two manual fixes the engine skips

Add a post-pass that converts inline style strings to objects and namespaces internal ids per component, so the batch output compiles and multi-render pages don't collide.

function patch(code, name) {
  // 1) style="a:b;c:d" → style={{ a: 'b', c: 'd' }}  (engine leaves strings)
  code = code.replace(/style="([^"]*)"/g, (_, s) => {
    const obj = s.split(';').filter(Boolean).map(d => {
      const [k, v] = d.split(':');
      const key = k.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
      return `${key}: '${v.trim()}'`;
    }).join(', ');
    return `style={{ ${obj} }}`;
  });
  // 2) namespace internal ids so two instances don't collide
  return code.replace(/id="([^"]+)"/g, `id="${name}-$1"`)
             .replace(/url\(#([^)]+)\)/g, `url(#${name}-$1)`)
             .replace(/href="#([^"]+)"/g, `href="#${name}-$1"`);
}

Barrel export + type-check gate in CI

Re-export every component and fail the build if any generated component is invalid TSX — catches a malformed SVG before it ships.

// scripts/gen-barrel.mjs
import { readdir, writeFile } from 'node:fs/promises';
const files = (await readdir('src/components/icons')).filter(f => f.endsWith('.tsx') && f !== 'index.tsx');
const lines = files.map(f => {
  const n = f.replace('.tsx', '');
  return `export { ${n}, default as ${n}Default } from './${n}';`;
});
await writeFile('src/components/icons/index.tsx', lines.join('\n') + '\n');

# CI:
node scripts/gen-barrel.mjs && npx tsc --noEmit

The public POST /api/v1/tools/svg-to-jsx/run deliberately never accepts uploads — it returns 400 with error: 'Runner required', the schema endpoint, and the local runner URL. This is the privacy model: content only ever executes on your paired machine. Point your script at http://127.0.0.1:9789/v1/tools/svg-to-jsx/run instead.

acceptsMultiple is false for svg-to-jsx — there is no built-in folder/ZIP conversion in the tool or engine. Batch is your loop over files calling the single-file engine per SVG. (svg-sprite-builder is the only SVG tool that takes multiple files, and it builds a <symbol> sprite, not React components.)

The engine leaves style="…" as a string, which React rejects. At batch scale a single icon family with inline styles can break dozens of components. Add a style-string-to-object post-pass (see the cookbook) or switch that subset to @svgr, whose SVGO config can normalise styles.

Icon exporters love id="clip0", id="paint0_linear". Convert 200 of them and you have 200 clip0s; render two on a page and the refs collide. Namespace ids per component in your post-pass (id="<Name>-clip0" plus the matching url(#…)/href="#…" rewrites).

2-factor.svg → 2Factor, which can't be a JS identifier. Your naming function must guard against leading digits (prefix a word) and sanitise non-alphanumerics. Otherwise tsc fails on export const 2Factor. Validate names in the loop before writing.

If a file in the folder is a partial fragment (a <symbol> or bare <path>), the converter expects an <svg> root. Skip or wrap non-<svg> files in your loop; the engine produces a component but it may be malformed if the root assumptions don't hold.

Across a batch, any icons with <filter> primitives (flood-color, lighting-color, color-interpolation-filters) keep kebab-case and warn in React. Most icon sets don't use these, but a 'duotone with shadow' set might. Add those renames to your post-pass if your library includes filters.

Each call is still bounded by the tier file limit (5 MB free / 50 MB Pro). Icons are tiny, but a folder mixing in full illustrations can trip it. Pre-filter by size, and minify large files with svg-pro-minifier before conversion if needed.

@svgr's export style depends on its config and your framework; the JAD engine always emits both a named and a default export. If you switch generators mid-project, audit imports — import Icon from vs import { Icon } from may need updating across consumers.

If the @jadapps/runner isn't paired/started, the POST to 127.0.0.1:9789 fails with a connection error. Add a health check (GET 127.0.0.1:9789/v1/health) at the top of the script and fail fast with a clear message pointing to /docs/runner.