How to automate batch svg to react component conversion
- Step 1Install @svgr/cli — npm install --save-dev @svgr/cli. Create an .svgrrc config file with your preferred settings: svgo true, prettier true, typescript true, ref true for forwardRef support.
- Step 2Run the batch conversion — npx svgr --config-file .svgrrc --out-dir ./src/components/icons ./src/assets/icons. This converts every .svg in the source folder to a .tsx React component.
- Step 3Generate the barrel export — Create an index.ts that re-exports all components: node scripts/gen-icon-barrel.js > ./src/components/icons/index.ts. This enables import { SearchIcon, HomeIcon } from '@/components/icons'.
Frequently asked questions
How do I handle SVG filename conflicts with React component naming?+
@svgr converts filenames to PascalCase automatically (search-icon.svg → SearchIcon). Configure a custom template to add a suffix or prefix if names conflict with existing components.
Does the JAD API support custom JSX templates?+
Yes. POST a template object in the API request body to customise the component wrapper, imports, displayName, and prop types for all generated components.
How do I test generated components are visually correct?+
Add a Storybook story that renders each generated component at multiple sizes. Run Chromatic or Percy visual regression on the story suite after each batch conversion.
Can I batch convert SVGs to TSX with forwardRef?+
Yes. Add ref: true to .svgrrc or pass --ref to the @svgr/cli. This wraps each component in React.forwardRef() and types the ref as React.Ref<SVGSVGElement>.
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.