SVG to JSX Converter

How SVG to JSX conversion works

React (JSX) is almost HTML, but not quite: attribute names must be camelCased (stroke-width → strokeWidth), class becomes className, for becomes htmlFor, and inline style must be a JS object (style={{ opacity: 0.9 }}) rather than a string. This converter applies all of those transforms to pasted SVG and can wrap the result in a typed component that spreads {...props} onto the root <svg> — so you can pass className, width, or event handlers from the caller. data-* and aria-* attributes are left untouched, as React expects.

Everything runs in your browser. Shrink the markup first with the SVG Optimizer, convert full pages with the HTML to JSX Converter, or inline it as a data URI with SVG to Data URI.