SVG to React Component
Convert raw SVG markup into a typed React component.
Runs entirely in your browser — your input never leaves your deviceAbout this tool
Paste raw SVG markup and get a clean, typed React component. The converter renames attributes to their JSX equivalents (class → className,stroke-width → strokeWidth), converts inline styles to a style object, spreadsprops onto the root<svg>, and preserves the viewBox.
Name your component, copy the output, and drop it straight into your project. Conversion runs entirely in your browser.
Why use it
JSX-ready
Renames attributes (class → className, stroke-width → strokeWidth) and converts inline styles.
Typed + spreadable
Outputs a typed component that spreads props onto the root svg.
Preserves structure
Keeps viewBox and gradients intact via XML parsing.
Common use cases
- Turn an icon into a React component
- Make an SVG accept className and onClick
- Drop a logo into a component library
- Convert exported SVGs for your app
Frequently asked questions
What does it convert?
Attribute names to camelCase JSX (class→className, for→htmlFor, kebab-case→camelCase), inline style strings to style objects, and it spreads props onto the root svg so you can pass className, width, onClick, etc.
Is the component typed?
Yes — the root accepts React.SVGProps<SVGSVGElement>, so you get full TypeScript prop typing out of the box.
Does it preserve viewBox and gradients?
Yes. The SVG is parsed as XML so case-sensitive attributes like viewBox and elements like linearGradient are preserved.
Is my SVG uploaded?
No. Parsing and conversion happen entirely in your browser.
Related developer tools
Explore more free tools
Every category runs free in your browser — nothing is uploaded.