SVG to React, Vue and Flutter
Paste raw SVG and get a clean React component, Vue template or Flutter widget. TypeScript support, attribute conversion, copy or download. Nothing is uploaded.
import type { SVGProps } from 'react';
export default function MyIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="9" />
<path d="M9 12l2 2 4-4" />
</svg>
);
}
Everything runs in your browser. Your SVG never leaves the tab. No uploads, no accounts, no server.
What it does
Three frameworks
React JSX, Vue 3 template or Flutter widget. Same SVG in, correct code out.
Attribute conversion
class to className, stroke-width to strokeWidth, xlink:href to xlinkHref. Every kebab-case SVG attribute handled.
TypeScript option
Generate typed React components with SVGProps or a plain .jsx version. One toggle.
Spread props
Optionally spread incoming props onto the root svg so size, color and aria attributes pass through.
Inline style objects
style="fill:red;stroke:blue" becomes style={{ fill: "red", stroke: "blue" }} in React output.
Copy or download
Copy to clipboard with one click, or download as .tsx, .jsx, .vue or .dart.
How it works
- 1
Paste your SVG
Drop raw SVG markup into the input. Copy it straight from Figma, Illustrator or a downloaded file.
- 2
Pick a framework
Choose React, Vue or Flutter. Set the component name and toggle TypeScript if you want it.
- 3
Copy or download
The converted code appears on the right. Copy it or download the file and drop it straight into your project.
Compared with online converters
| What matters | Typical converters | ToolDeck |
|---|---|---|
| Works offline | Rarely | Yes, after first load |
| Sign-up | Often required | None |
| Upload your SVG | Yes, to a server | Never, runs in your browser |
| TypeScript output | Premium | Free |
| Vue and Flutter | Separate tools | Same tool, three tabs |
| Cost | Credits or subscription | Free, unlimited |
Related tools
Questions people ask
What does this tool actually do?
It takes raw SVG markup and rewrites it for React, Vue or Flutter. That means renaming attributes (class to className, stroke-width to strokeWidth), removing XML declarations, converting inline styles to JS objects, and wrapping the result in a proper component for your chosen framework.
Is my SVG uploaded anywhere?
No. The entire conversion runs in your browser using JavaScript. Open the network tab while you convert and you will see zero outgoing requests. Your SVG never leaves the tab.
Does it handle xlink and old SVG?
Yes. xlink:href becomes xlinkHref, xlink:title becomes xlinkTitle. Old SVG 1.0 files with xlink namespaces work.
What about <style> tags inside the SVG?
Style tags are preserved in the output but may need manual tweaking. Most icon SVGs use presentation attributes rather than style tags, so this is rare. If your SVG uses a style block, check the output before shipping.
What is the Flutter output?
Flutter does not have a native SVG widget, so the tool wraps your SVG string in a flutter_svg SvgPicture widget. That is the standard way to render SVG in Flutter and works with the flutter_svg package.
Can I use the output in production?
Yes. The output is clean and formatted. Every React icon library, from Lucide to Heroicons, uses the same conversion you get here.
Why does it say fill="none" but I want fill?
That is your SVG, not the tool. If your original SVG has fill="none" on the root, the tool keeps it. Just edit the attribute in the source SVG or the output code.
Does it optimize the SVG?
It removes XML declarations, DOCTYPEs and comments, and it removes xmlns attributes that JSX and Vue do not need. For deeper optimization (path simplification, decimal trimming) run the SVG through SVGO first.
Need a different developer tool?
Tell us what you need. JSON, YAML, regex, cron, SQL, whatever you use daily.
Request a tool