SVG to JSX Converter

You downloaded an SVG icon from Figma, Heroicons, or an icon library, and you need to use it as a React component. But raw SVG uses HTML attributes like class, fill-rule, clip-path, stroke-width, and xmlns — which are invalid or behave differently in JSX. Manually converting every attribute is tedious and easy to get wrong.

Why SVG Needs Conversion for JSX

JSX is not HTML — it is a JavaScript syntax extension that maps to React.createElement() calls. This means:

• class must become className
• Hyphenated attributes like stroke-width must become strokeWidth
• fill-rule must become fillRule
• clip-path must become clipPath
• Inline style strings must become style objects
• xmlns can be removed (React handles SVG namespace automatically)
• Self-closing tags must use /> syntax

How This Converter Works

Paste SVG markup and the tool generates a valid JSX React component:

1. Attribute renaming: All SVG attributes are converted to their JSX camelCase equivalents
2. class → className: The class attribute becomes className
3. Style conversion: Inline style="..." strings become style={{ ... }} objects with camelCased properties
4. xmlns removal: The xmlns attribute is removed since React handles namespacing
5. Self-closing tags: Empty elements like <path d="..."></path> become <path d="..." />
6. Component wrapping: Output is wrapped in a functional component with props spread on the root SVG element

Common Use Cases

Icon components — Convert SVG icons from Figma, Sketch, or icon libraries into React components with customizable width, height, fill, and className props.

Inline SVG in React — Use SVG directly in JSX instead of loading SVG files with <img> tags, enabling dynamic styling and animation.

Design system icons — Build a typed icon library by converting SVG files to React components with consistent prop interfaces.

SVG illustrations — Convert complex SVG illustrations to React components for interactive data visualizations or animated graphics.

Tips for the Output

• Add currentColor: Replace hardcoded fill values with "currentColor" to inherit the parent’s text color
• Forward refs: Add React.forwardRef() if you need ref access to the SVG element
• TypeScript: Add React.SVGProps<SVGSVGElement> as the props type for full type safety
• Accessibility: Add role="img" and aria-label for decorative or meaningful SVGs

Frequently Asked Questions

Q: Does this handle multi-element SVGs? A: Yes. Complex SVGs with <g>, <defs>, <clipPath>, <mask>, <linearGradient>, and nested elements are fully converted with all attributes renamed to JSX equivalents.

Q: Are inline styles converted to objects? A: Yes. Inline style="fill: red; stroke-width: 2px" becomes style={{ fill: "red", strokeWidth: "2px" }} with camelCased property names.

Q: What about SVG animations? A: SMIL animation attributes (animate, animateTransform) are preserved in the output. CSS animations via style attributes are converted to style objects.

Q: Is my SVG sent to a server? A: No. All parsing and conversion happens entirely in your browser. Your SVG markup never leaves your device.