SVG to React
Convert raw SVG code into valid JSX/TSX React components instantly.
import React from 'react';
export default function Icon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM11 19.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="currentColor"/>
</svg>
);
}What is an SVG to React Converter?
Pasting raw SVG directly into a React functional component usually causes compilation errors because React enforces camelCase properties (like fillRule instead of fill-rule) and className instead of class. This tool instantly converts raw SVG markup into completely valid JSX code, wrapping it in a strongly-typed functional component.
How to use
- 1Copy the raw XML code of your SVG.
- 2Paste the code into the left editor pane.
- 3The converter will automatically format kebab-case attributes to camelCase.
- 4It also automatically passes through standard React SVG props to the root element.
- 5Click the 'Copy JSX' button to copy your new component.