import type { SVGProps } from 'react';
function SvgComponent(props: 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" {...props}>
<circle cx="12" cy="12" r="10" />
<path d="M8 12l3 3 5-6" />
</svg>
);
}
export default SvgComponent;
About SVG to React Converter — JSX/TSX Component Online
Turning a raw SVG into a React component means more than pasting markup into JSX. React expects camelCased attribute names — `stroke-width` becomes `strokeWidth`, `fill-rule` becomes `fillRule` — and `class` must be rewritten to `className`. Miss one and the component throws at build time.
This SVG to React converter does that transformation for you and hands back a clean, ready-to-use function component. It camelCases every attribute, spreads `{...props}` onto the root `<svg>` so you can pass `width`, `className`, or event handlers from the call site, and can emit a fully typed TypeScript (.tsx) version on demand.
Everything runs in your browser — no upload, no svgr install, no build step. Your SVG never leaves the device, which makes this safe for proprietary icons and illustrations.
Features
- Converts kebab-case SVG attributes to camelCase JSX (strokeWidth, fillRule, clipPath)
- Rewrites class → className and other JSX attribute names
- Spreads {...props} onto the root <svg> so callers can override size, class, and handlers
- Optional TypeScript output typed as SVGProps<SVGSVGElement>
- Fully offline — your SVG is never uploaded
How to use
- Paste your raw SVG markup into the input pane.
- Type a component name (PascalCase) — or leave it as the default.
- Toggle TypeScript on for a typed .tsx component, off for plain .jsx.
- Copy the generated component from the output pane into your project.
Frequently asked questions
Why convert an SVG to a React component instead of using an <img>?
Inlining the SVG as a component lets you style it with CSS, animate paths, change colors via currentColor, and pass props like size or className. An <img> tag treats the SVG as an opaque image you cannot style from the outside.
Which attributes get renamed?
Kebab-case presentation attributes are camelCased (stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath), class becomes className, and namespaced attributes like xlink:href map to their JSX names. data-* and aria-* attributes are left as-is, matching React.
What does {...props} on the root <svg> do?
It forwards any props you pass to the component straight onto the <svg> element. That means you can set width, height, className, style, onClick, or aria attributes from wherever you render the component, without editing the generated code.
Is my SVG uploaded anywhere?
No. The conversion is a pure string transform that runs entirely in your browser. Nothing you paste is sent to a server, so it is safe for private or proprietary artwork.
Related tools
Everything runs locally in your browser — your input is never uploaded.