SVG to React Component

Paste SVG code and get a ready-to-use React functional component with proper JSX attributes.

Component Name
SVG Input 0 lines · 0 chars
React Component Output .jsx
0 lines · 0 chars

About SVG to React Component

Using SVG icons and illustrations in React requires some attribute transformations. Raw SVG code uses HTML attribute names that React does not accept — things like class, stroke-width, and xlink:href must all be changed to their JSX equivalents.

This tool automates all those transformations and wraps the SVG in a reusable functional component that accepts className and spread props for maximum flexibility.

What Gets Transformed

class → className — React's JSX requires className instead of class.
Hyphenated attributes → camelCase — stroke-width becomes strokeWidth, fill-opacity becomes fillOpacity, etc.
style string → style object — style="fill: gold" becomes style={{ fill: 'gold' }}.
xlink:href → href — The deprecated xlink:href attribute is modernized to href.
XML declarations removed — <?xml ...?> and DOCTYPE declarations are stripped.
Comments removed — SVG comments are stripped from the output for clean JSX.
aria-hidden="true" added — Icons are decorative by default; accessibility best practice.
className + ...props spread — The component accepts a className prop and forwards all other props to the SVG element.

How to Use

  1. Paste your SVG into the left panel. The conversion happens in real time.
  2. Set a component name — this becomes the function name in the output.
  3. Toggle TypeScript to get a .tsx-style component with type annotations.
  4. Toggle Default export to choose between named or default export.
  5. Copy or download the output and drop it into your React project.