Paste or drop SVGs and get typed React, React Native, Vue or Svelte components ready to import — no build plugin needed.
SVG files or a folder — one component per file · or paste SVG code
No size limit · files are processed on your device and never uploaded · how it works
Advanced settings (optional)
Component options
Framework
Default size
Fixed width/height are removed; this becomes the default so the icon scales with text.
Options
Runs in your browser. Files are never uploaded — you can go offline after the page loads.
How to use the SVG to React
Click “Choose Files” or drop your SVG files into the box above. Whole folders work too.
Adjust the Advanced settings if you need to, then click “Copy”.
When the row shows Done, click “Download” — or “Download all” for a ZIP.
Easy to use
Drop files, pick options, download. Whole folders at once, no signup, no daily limit.
Best quality
The same engines the professionals use — SVGO, resvg, MozJPEG, libwebp, libavif — compiled to run in your browser.
Private & secure
Files are processed on your device and never uploaded. Close the tab and nothing remains anywhere.
From SVG file to component
Paste SVG markup or drop files, pick a framework, and copy the result. For React the converter rewrites attributes to JSX
(stroke-width → strokeWidth, class → className), turns inline
style strings into objects, removes the XML prologue, comments and namespace attributes, replaces fixed
dimensions with a default size, and spreads {...props} on the root so the component accepts
className, event handlers and ARIA attributes like any other element. The component name comes from the file
name in PascalCase (arrow-right.svg → ArrowRight).
Frameworks
React — .jsx or typed .tsx with React.SVGProps<SVGSVGElement>; optional memo() wrapper and title prop.
React Native — elements mapped to react-native-svg components (Svg, Path, G…) with the import statement generated.
Vue 3 — single-file component with v-bind="$attrs" on the root and <script setup>.
Svelte — component with a size prop and {...$$restProps}.
Recommended settings for UI icons
Keep currentColor on so the icon follows CSS color, keep the default size at 1em
so it scales with surrounding text, and enable the title prop if the icon ever conveys meaning on its own.
Optimise the SVG first with the SVG Optimizer — the component is only as small as the markup
inside it. If you have dozens of icons, a sprite is often lighter than dozens of
components; many teams use both.
Frequently asked questions
What does the converter change in my SVG?
For React it renames attributes to their JSX form (stroke-width → strokeWidth, class → className, xlink:href → xlinkHref), converts style="…" strings to style objects, removes the XML declaration, comments and the xmlns/version attributes, drops fixed width/height in favour of a size prop, and spreads {...props} on the root so you can pass className, onClick or aria-label. Path data and structure are untouched.
Why currentColor by default?
An icon component whose fills and strokes are currentColor takes its colour from CSS — color: on the parent, hover states, dark mode — with no extra props. That is how most icon libraries behave and it is almost always what you want for UI icons. Untick it for illustrations with a fixed palette.
Is this the same as SVGR?
It produces equivalent output for the common cases and runs entirely in your browser, which is handy when you need one component quickly or are not using a build pipeline. SVGR remains the right choice as a Webpack/Vite plugin that converts on import at build time. Both produce plain components with no runtime dependency.
How do I add accessibility?
Tick "title prop": the component accepts an optional title and renders <title> inside the SVG so screen readers announce it; without a title the icon is decorative. For React you can also pass aria-label or aria-hidden through the props spread.
Most online converters upload your file to a server. InfyTool ships the actual encoders to your browser as WebAssembly instead, so processing happens inside your tab — faster for batches, and nothing to delete afterwards.
No upload, ever. Turn off Wi-Fi after the page loads and every tool keeps working.
No limits. No file-size cap, no queue, no watermark, no account.
Runs on your CPU. Batches use several cores in parallel; nothing is throttled.