SVG to React component
Turn an SVG into a ready-to-use React or Vue component.
Using toolbook means you agree to our Terms and Privacy Policy.
or drag it here
SVG file
Your files stay on your device
How to use it
Paste SVG code or drop a file here to get a ready-to-use React or Vue component, with attributes fixed, TypeScript types, and an optional size prop.
Pasting raw SVG into a React file doesn’t work — attributes like stroke-width and class need different names, and the style attribute needs a different format. This does all that for you.
Paste your SVG or drop the file in, pick React or Vue, and copy the finished component. It comes with TypeScript types.
Two handy options: “Use currentColor” makes the icon match the text colour around it, so one component works on light and dark backgrounds. “Size prop” lets you set the icon size wherever you use it.
Want a smaller component? Run the file through the SVG Optimizer first.
FAQ
Why can’t I just paste the SVG into my component?
React needs different attribute names, like strokeWidth and className, and a different style format. Raw SVG gives warnings or errors.
What does “use currentColor” do?
It makes the icon match the text colour around it, so one component works in any colour scheme.
Does it support TypeScript?
Yes, for both React and Vue.
Does it optimise the SVG too?
No. Run it through the SVG Optimizer first if you want it smaller.
How it worksFor the curious
JSX spells hyphenated SVG attributes in camelCase — stroke-width → strokeWidth, stroke-linecap → strokeLinecap, xlink:href → xlinkHref — and class becomes className. The style attribute becomes an object, since passing a CSS string throws. data- and aria- attributes are left as written, the documented exceptions.
Vue templates accept SVG attributes as they appear in the file, so the Vue output adds a lang="ts" setup block and typed bindings instead of translating names.
“Use currentColor” replaces hard-coded fills and strokes, leaving gradient references and none alone. “Size prop” removes the exported width and height, adds them back as a prop, and spreads remaining props onto the root, so the component accepts className, onClick, or aria-label. React props are typed as SVGProps<SVGSVGElement>.
A file with no viewBox gets one derived from its width and height, because without one the component cannot be resized. The markup is translated, not optimised.