~/frontend-tools/svg-to-jsx-converter
SVG to JSX Converter
Paste an SVG and get JSX that React accepts: attributes such as stroke-width become strokeWidth, class becomes className, inline styles become objects, and XML clutter is removed. Optionally wrap it in a component that forwards props.
Using the SVG to JSX Converter
Why SVG needs converting
JSX looks like HTML but follows JavaScript naming: hyphenated attributes must be camelCase (stroke-width becomes strokeWidth), class is reserved so it becomes className, and the style attribute takes an object rather than a string. Pasting raw SVG into React produces warnings or errors.
What gets cleaned up
XML declarations, comments, doctype lines and editor metadata are removed. Namespaced attributes such as xlink:href become xlinkHref. data- and aria- attributes keep their hyphens, because React expects them that way.
Component wrapper
The wrapper creates a function component that spreads props onto the svg element, so you can pass className, aria-label or event handlers from outside. The 1em option replaces fixed width and height so the icon sizes itself with the surrounding text.
Accessibility
Decorative icons should be hidden from screen readers with aria-hidden="true"; meaningful icons need a label. Pass either through the component's props.
Icons as components
Turning each icon into its own component makes it easy to import only the icons a page uses, so unused artwork never reaches the browser. Keep a consistent viewBox, such as 0 0 24 24, and use currentColor for fills and strokes so the icon automatically takes the colour of the surrounding text.
Frequently asked questions
Does it optimise the SVG?
It removes clutter but does not simplify paths. Run very large SVGs through an optimiser such as SVGO first.
Does it work for Preact or Solid?
The output is standard JSX. Solid uses class instead of className, so adjust that one attribute.
Is the SVG uploaded?
No, conversion happens in your browser.