SVGMend

SVG to JSX

Convert SVG to a React component

Paste an SVG and get a ready-to-use component: attributes in camelCase, styles as objects, editor junk gone, and props passed through so you can size and colour it from outside.

Runs in this tab. Nothing is uploaded.

Options

Export
Width and height

Component


					

					

						
Preview

						

					

				

			

			

				

				
				
				
			

		

	


	

		

			

				
What the converter changes

				
    
					
  • Attributes become React props: stroke-width → strokeWidth, class → className, xlink:href → xlinkHref. data-* and aria-* stay as they are.
    • 
					
  • Inline styles turn into objects, such as style={{ strokeLinecap: "round" }}. Custom properties like --size are kept.
    • 
					
  • Text that contains braces or other characters JSX treats specially is wrapped in a string, and <style> blocks become template literals.
    • 
					
  • Event handlers such as onclick="…" and editor namespaces are dropped, because they can’t be expressed in JSX.
    • 
				

				
Options

				
Spread props places {...props} last, so <Icon width={32} className="logo" /> overrides the defaults. 1em sizing makes an icon scale with the surrounding text, and currentColor makes it take the text colour. With TypeScript the props are typed as SVGProps<SVGSVGElement>. The output works with React 17 and later; no import of React is needed.

			

			
		

	


	

		

			
Questions

			

				
Does it work with Preact, Solid or Vue JSX?
The output uses React’s naming (className, camelCase attributes). Preact accepts it as is. Solid and Vue prefer the original attribute names, so adjust class and hyphenated attributes there.

				
Why are IDs kept?
Gradients, masks and clip paths are referenced by ID. If you render the same icon several times on one page, give each instance unique IDs, or prefix them with SVG Repair first.

				
Is my SVG sent anywhere?
No. The conversion runs entirely in your browser; nothing is uploaded.

			

		

	


	




	

		

			

				
More SVG tools