SVG to JSX Converter
Convert SVG markup to React JSX component. Transforms class to className, kebab-case attributes to camelCase, inline styles to objects.
About this tool
Convert SVG markup into a reusable React JSX component. Paste any valid SVG — or an inline SVG snippet — and get clean JSX with className, camelCase attribute names, and inline style objects, ready to drop into a React project.
Example: an SVG path stroke-width="2" becomes strokeWidth={2}, and class="icon" becomes className="icon". Enable "Wrap as component" to get a full functional component with width/height/fill props.
Useful when migrating icon sets from raw SVG files to a React component library, or when copying icons from design tools like Figma that export SVG markup.
FAQ
Why does class become className? ›
In JSX, "class" is a reserved keyword. React uses "className" instead to set the CSS class attribute on elements.
Why do hyphenated attributes become camelCase? ›
JSX compiles to JavaScript function calls, where attribute names are property keys on an object. Hyphenated names (like stroke-width or fill-opacity) are not valid JavaScript identifiers, so they must be converted to camelCase (strokeWidth, fillOpacity).
Can I use this for non-SVG XML too? ›
This tool is specifically designed for SVG conversion. For plain HTML to JSX, use the HTML to JSX Converter instead, which handles HTML-specific attributes and event handlers.
The component wrapper adds fill and viewBox props — can I customize those? ›
The generated component accepts props with sensible defaults (24x24, fill="none"). You can pass any prop to override them: <code><SvgComponent width={32} height={32} fill="#000" /></code>. The <code>...props</code> spread passes through any extra attributes.