Design

SVG to React Component

Convert SVG code to React JSX components instantly. Replaces class with className, converts inline styles, and exports a clean functional component. Free online tool.

svg to jsx onlineconvert svg to reactsvg to react component online freesvg to tsx converterinline svg react

Raw SVG Input

React Component

export default function SvgIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg 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" className="lucide lucide-smile" {...props}><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
  );
}

Frequently Asked Questions

How do I use an SVG in React?+

Either import the SVG as a component (with SVGR) or convert the SVG markup to JSX by replacing 'class' with 'className' and converting style strings to objects — this tool does that automatically.

Does this tool support TypeScript?+

Yes — it generates a typed React.FC component with proper TypeScript props.

More Free Tools

Freelance CSV Reconciler Bulk SVG Optimizer Robots.txt Generator Regex Bulk Extractor JSON to CSV Smart Mapper Oh Sh*t, Git!Cron Job Generator Timezone Overlap Finder