svgsvgsvg.com

SVG to React Component

Paste SVG markup and get a ready-to-use React component — attributes converted to JSX, width and height forwarded as props. Runs entirely in your browser.

Language:

What transformations are applied?

  • Attribute names — hyphenated SVG attributes like stroke-width are converted to camelCase strokeWidth, as JSX requires.
  • class → className — the HTML class attribute becomes className as required by React.
  • xlink:href → href — the deprecated XLink namespace is replaced with the modern href attribute.
  • style string → style object — inline style="…" strings are converted to JSX style={{…}} object notation.
  • Namespace declarations removed — xmlns and xmlns:xlink are stripped; React handles SVG namespacing automatically.
  • width and height as props — the SVG's declared dimensions become default values for width and height props, with {...props} spread for full flexibility.

JSX vs TSX

JSX generates a plain JavaScript function component with no type annotations — suitable for JavaScript React projects or when you want minimal boilerplate.

TSX adds a React.SVGProps<SVGSVGElement> type annotation to the props, giving you full type safety and IDE autocompletion in TypeScript projects.

Frequently Asked Questions

Do I need to import React explicitly?+

With React 17+ and the new JSX transform configured in your bundler, you can remove the import React from 'react' line. With React 16 or the classic JSX transform, the import is required. The generated component includes it for maximum compatibility — delete it if your project doesn't need it.

How do I pass a custom color via props?+

Replace hardcoded fill or stroke values with currentColor in your SVG before converting. Then set the icon color via the color CSS property on the parent element, or pass it explicitly as a prop after adding it to the component signature.

Is my SVG sent to a server?+

No. The conversion runs entirely in your browser using the built-in DOM parser. Your SVG markup never leaves your device.

How do I add TypeScript types to the component?+

Select the TypeScript output option to get a component typed with SVGProps<SVGSVGElement>. This gives you full autocomplete and type checking for SVG attributes in your editor. If your project uses a different type such as React.SVGAttributes<SVGSVGElement>, edit the type annotation after pasting.

Related Tools

SVG Accessibility Checker
Check SVG markup for missing accessibility attributes — title, role, aria-labelledby, and more — with fix suggestions and an auto-fixed output.
→
SVG Sprite Packer
Combine multiple SVG icons into a single sprite with <symbol> elements and <use> snippets — paste SVGs one at a time, get a ready-to-paste sprite SVG.
→
SVG Color Swapper
Extract every color from SVG markup as a swatch and replace any of them with a color picker — live preview, instant copy.
→

How to use

  • Paste your SVG markup — the component appears instantly.
  • Set a component name or leave it as SvgIcon.
  • Choose JSX for JavaScript projects or TSX for TypeScript.
  • Copy the result and paste it directly into your React codebase.