SVG to React component
Turn an SVG into a React or Vue component — attributes translated, props wired up.
By opening this website or using its tools, you agree to our Terms and Privacy Policy.
or drag it here
SVG file
Your file never leaves your browser during processing
How it works
To convert an SVG into a React component, paste the markup or drop the file onto this page — attribute names are translated to JSX (stroke-width becomes strokeWidth, class becomes className), the style attribute becomes an object, and you get a typed component with an optional size prop, generated entirely in your browser.
Pasting raw SVG into a .jsx file does not work, and the reason is that JSX is not HTML. Hyphenated SVG attributes have camelCase spellings in JSX — stroke-width becomes strokeWidth, stroke-linecap becomes strokeLinecap, xlink:href becomes xlinkHref — and class collides with a reserved word so it becomes className. The style attribute is the sharpest edge: in JSX it takes an object, not a CSS string, and passing the string throws outright. This tool walks the parsed SVG and rewrites all of that, leaving data- and aria- attributes alone, which are the documented exceptions React keeps as written.
Vue output is deliberately different rather than the same string with different wrapping. Vue templates accept SVG attributes exactly as they appear in the file, so nothing needs translating there; what it needs instead is a script block and bindings, which is what gets generated.
Two options change more than the syntax. "Use currentColor" replaces every hard-coded fill and stroke with the currentColor keyword, so the icon inherits whatever text colour surrounds it — this is what makes a single component work in a dark header and a light sidebar without duplication. It leaves gradient references and none untouched, since neither is a colour that can be inherited. The "size prop" option removes the exported width and height, adds them back as a prop, and spreads the remaining props onto the root, so one import can be rendered at any size and still accept a className, an onClick, or an aria-label.
A file with no viewBox gets one derived from its width and height, because without a viewBox the component cannot be resized at all.
FAQ
Why can’t I just paste the SVG into my component?
JSX spells SVG attributes differently — stroke-width must be strokeWidth, class must be className — and the style attribute has to be an object rather than a string. Pasting raw markup produces a wall of React warnings, or a hard error on style.
What does "use currentColor" do?
It replaces hard-coded fill and stroke colours with the currentColor keyword, so the icon takes the CSS colour of whatever contains it. One component then works in every colour context instead of needing a copy per colour.
Does this support TypeScript?
Yes. The React output types the props as SVGProps<SVGSVGElement> with an optional size, and the Vue output uses a lang="ts" setup block with typed props.
Is the SVG optimized as part of this?
No — the markup is translated, not rewritten. Run the file through the SVG optimizer first if you want editor metadata and long decimals gone before it becomes a component.
Does my code leave the browser?
No. Parsing and code generation run in this page. The network monitor below the tool watches for outbound requests during processing and stays at zero.