Paste an SVG and get valid JSX: class becomes className, stroke-width becomes strokeWidth, style strings become objects.
Loading the SVG to JSX tool…
Processed on your device. Files are never uploaded.
Paste SVG code or drop a file.
Choose component name, TypeScript, props spread and currentColor.
Copy the component into your project.
JSX follows the DOM property names, so hyphenated attributes are camelCased (stroke-linecap → strokeLinecap), class becomes className, xlink:href becomes xlinkHref, and inline style must be an object. Namespaced editor attributes are dropped, and comments are removed because JSX handles them differently.
For a build pipeline that imports .svg files as components, SVGR is the standard. For converting a handful of icons by hand, this tool gives the same kind of output without adding a dependency.
Output targets react-dom. For react-native-svg, element names must be capitalised (Svg, Path); that is not done here.
Tick “Use currentColor” and the icon inherits the text colour of its parent.