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.