SVG to Component
Turn any SVG into a production-ready React or Vue component — with a size prop, JSX attributes, and zero dependencies.
Convert SVG to React or Vue Components Instantly
Copying an SVG into a React or Vue codebase means manually renaming attributes, adding a size prop, and cleaning up XML preambles. Zolkit's SVG to Component converter does all of that automatically — paste your SVG and get a clean, typed component in seconds.
Proper JSX Attributes
Automatically converts SVG attribute names to their JSX equivalents: stroke-width → strokeWidth, fill-rule → fillRule, class → className, and more.
Instant Conversion
Results update as you type. Pure JavaScript — no server round-trip, no heavy libraries, no WASM. Just fast, in-browser processing.
React & Vue Support
Generate a typed React functional component with SVGProps, or a Vue SFC with a Composition API script setup block. Switch between frameworks with one click.
100% Private
Your SVG code never leaves your browser. Everything is converted in memory with no server, no logging, and no data collection.
Free Forever
No account required, no usage limits, no paywalls. Paste your SVG, copy the component, ship.
Size Prop Built In
Every generated component accepts a size prop (default 24) that controls both width and height, making it easy to use at any scale in your design system.
How to Convert SVG to a Component
- 1
Paste your SVG code into the input panel, or drop a .svg file onto it.
- 2
Type a component name and choose your target framework — React (TSX) or Vue (SFC).
- 3
Copy the generated component code or click Download to save it as a .tsx or .vue file.
Frequently Asked Questions
What SVG attribute names are converted for React?
All hyphenated SVG attributes are converted to camelCase: stroke-width → strokeWidth, fill-rule → fillRule, clip-rule → clipRule, stroke-linecap → strokeLinecap, and so on. The special cases class → className and xlink:href → href are also handled.
Why doesn't the Vue output convert attribute names?
Vue templates natively support kebab-case attribute names on SVG elements — the browser and Vue's compiler both handle stroke-width correctly. No conversion is needed, keeping the Vue output closer to the original SVG.
What does the size prop do?
The generated component replaces the SVG's fixed width and height values with a size prop (default 24). This lets you use the component at any size: <MyIcon size={32} /> or <MyIcon size={16} />.
Can I use the React component with custom SVG attributes?
Yes. The React component extends React.SVGProps<SVGSVGElement>, so you can pass any valid SVG attribute as a prop: fill, stroke, className, aria-label, and so on. The {...props} spread on the root <svg> passes them all through.
What happens to SVG elements without children, like <path>?
Common void SVG elements (path, circle, rect, ellipse, line, stop, and others) that appear as <elem></elem> in the source are automatically converted to the self-closing <elem /> form required by JSX.
Does this tool handle multi-color or complex SVGs?
Yes — the converter processes all elements and attributes in the SVG, not just simple single-path icons. Gradients, filters, masks, and groups are all preserved. The output is the full SVG wrapped in a component, not a simplified version.