Developer

SVG to JSX Converter

Paste an SVG or open an .svg file and get a ready-to-use React component — JSX or TypeScript, with width, height and colour props.

SVG input

PascalCase, so React treats it as a component.

Language
Export

CheckmarkIcon.tsx

Converting…

  • React-ready attributes

    stroke-width becomes strokeWidth, class becomes className and inline styles become style objects.

  • TypeScript support

    Generates a typed props interface that extends SVGProps, so every SVG attribute still works.

  • Safe by default

    Scripts, inline event handlers, javascript: links and editor metadata are stripped from the output.

Convert SVG to a React component

Raw SVG doesn't paste cleanly into React: attributes like stroke-width and class must be renamed, and inline style strings must become objects. This converter does all of that and wraps the result in a component you can import anywhere — handy for icon sets, logos and illustrations exported from Figma, Illustrator or Inkscape.

How to use it

  1. Paste your SVG code, or open an .svg file.
  2. Name the component and choose TypeScript or JavaScript, and a default or named export.
  3. Keep Add props on to control size and colour, e.g. <CheckmarkIcon width={24} color="#10b981" />.
  4. Copy the code or download the file into your components folder.

What gets converted

  • Hyphenated attributes to camelCase; data-* and aria-* stay as they are.
  • class → className, xlink:href → xlinkHref, xml:space → xmlSpace.
  • Inline styles to objects, e.g. style="fill-opacity:.5" → style={{ fillOpacity: ".5" }}.
  • The colour prop replaces the root fill (or stroke) so single-colour icons can be recoloured. Pass color="currentColor" to inherit the text colour.

Private by design. Everything runs in your browser — nothing you enter is uploaded or stored by AISeekho.

More free tools