SVG to React JSX Component Converter

Clean up raw SVG code and wrap it into a strongly typed, reusable React JSX functional component.

  • 100% free
  • Private in browser
  • No signup
  • No watermarks

React Component

import React from 'react';

export function HomeIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
  <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  <polyline points="9 22 9 12 15 12 15 22"/>
</svg>
  );
}

About SVG to React JSX Component Converter

The SVG to React JSX Converter wraps raw SVG markup in a named React function component. Paste an icon, choose a component name, and the tool renames common attributes such as stroke-width, stroke-linecap, fill-rule, clip-path, and class to their JSX forms, then spreads props onto the svg element. The component is typed with React.SVGProps<SVGSVGElement>, so the output is TSX. It renames a fixed list of twelve attributes and does not optimize paths or convert inline style strings.

How to use SVG to React JSX Component Converter

  1. Enter a name in the Component Name field, such as HomeIcon.
  2. Paste your markup into the Raw SVG Code box.
  3. Check the renamed attributes in the React Component panel.
  4. Click Copy JSX and save the code as a .tsx file.

Key features

  • Wraps the SVG in an exported function component with your chosen name
  • Types props as React.SVGProps<SVGSVGElement>
  • Renames stroke-width, stroke-linecap, stroke-linejoin, and stroke-miterlimit
  • Renames fill-rule, clip-rule, clip-path, stop-color, and stop-opacity
  • Converts class to className and xlink:href to xlinkHref
  • Spreads {...props} onto the root svg element

Frequently asked questions

How do I convert an SVG to a React component?
Paste the SVG markup into the Raw SVG Code box and type a component name. The component code appears below, and Copy JSX puts it on your clipboard.
Can I override width, height, or color through props?
Only for attributes the SVG does not already set. The props spread is placed before the SVG attributes, so a hard-coded width="24" wins over a width prop. Delete the attributes you want to control, or move {...props} to the end of the svg tag.
Which SVG attributes are converted to camelCase?
Twelve: stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, fill-rule, clip-rule, clip-path, stop-color, stop-opacity, class, xmlns:xlink, and xlink:href. Others, such as stroke-dasharray, fill-opacity, and font-size, stay as written, so rename them by hand.
Can I use the output in a plain JavaScript project?
Yes, after removing the type annotation. Change (props: React.SVGProps<SVGSVGElement>) to (props) and save the file as .jsx.
Does it clean up or optimize the SVG?
No. Paths, comments, editor metadata, and inline style strings are copied as they are, and a style="fill:red" attribute must be rewritten as a style object for React. Run the file through an SVG optimizer first for smaller output.

Related In-Depth Guides

Learn practical workflows, real-world examples, and expert tips in our comprehensive guides:

Security & DevOps · 5 min read

Password Entropy Explained: How Bits Measure Brute-Force Cracking Time

Understand Shannon entropy in passwords, character pool combinations, and how many seconds, years, or millennia it takes GPUs to crack modern passphrases.

Developer Tools · 5 min read

How to Convert Docker Run Commands to Docker Compose YAML Files

A comprehensive developer guide to transforming complex docker run commands into clean, maintainable docker-compose.yml files.

Design & Developer · 5 min read

Web Accessibility & Color Contrast (WCAG 2.1): How to Design AA & AAA Palettes

A practical guide to color contrast ratios, accessibility compliance, WCAG 2.1 AA/AAA standards, and building accessible UI palettes.

Rate this tool

Be the first to rate — helps others and improves this page.