SVG to React Component
Convert SVG markup into a ready-to-use React component. Transforms class→className, kebab-case props→camelCase, and inline styles automatically.
SVG Input
React Component
What gets converted
Frequently asked questions
Why can't I use raw SVG in React?
JSX is not HTML. React uses camelCase for DOM attributes (className instead of class, htmlFor instead of for) and requires style props to be JavaScript objects, not CSS strings. SVG adds even more kebab-case attributes like stroke-width and fill-rule that must also be converted.
Does it support TypeScript?
Yes. Enable the TypeScript toggle to get a component typed with React.SVGProps<SVGSVGElement>, which is the correct type for forwarding props to an SVG root element.
What does 'Spread props' do?
When enabled, the generated component accepts extra props (like className, onClick, or aria-label) and spreads them onto the <svg> element. This lets consumers customize the icon without forking the component.
Are xmlns attributes removed?
Yes. React does not need xmlns, xmlns:xlink, or version attributes — they are added automatically by the browser and cause noise in JSX, so this tool strips them.