SVG → JSX Converter
Convert SVG to React, React Native, Vue, or Svelte components with proper attribute conversion
import type { SVGProps } from "react";
export default function MyIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
);
}How to use
- Paste SVG source
- Enter component name and pick framework
- Copy the generated component
Use cases
- Design-to-code
- Icon components
- Framework migration
About the SVG → JSX / Vue / Svelte Converter
Designers hand off SVG; engineers use components. Converting manually is tedious because JSX renames almost every attribute to camelCase, wraps the markup in a function, and threads props through. This tool does all of that for React, React Native, Vue 3, and Svelte — with a live preview of what the source SVG looks like.
Features
- 4 framework targets
- Converts class → className, stroke-width → strokeWidth, etc.
- Strips XML declaration and DOCTYPE
- Props forwarding ({...props})
- Live preview
- Customizable component name
How it works
- Paste SVG source.
- Enter a component name (PascalCase).
- Pick framework.
- Copy the generated component into your codebase.
Frequently asked questions
What if my SVG has inline <style>?
+
Supported in basic form. For complex CSS, inline the styles as JSX style={{...}} attributes on the SVG elements.
React Native needs react-native-svg — is that wired up?
+
We import the SVG / Path / Rect / Circle / G etc. named exports; you'll need to install react-native-svg in your app. The imports template assumes that.
How do I use the exported component?
+
import Icon from './Icon'; <Icon className="w-6 h-6 text-blue-500" /> — props pass through via {...props}.
Does it handle gradients and filters?
+
Yes — <defs>, <linearGradient>, <filter>, etc., pass through unchanged except for attribute-name conversions.
Can I paste multiple SVGs?
+
Single SVG per conversion. For batch icon libraries, use tools like SVGR (CLI-based) or paste each SVG individually.