Comment utiliser : SVG to JSX Converter
- Paste your SVG markup, open an
.svgfile, or click Sample. - Set the component name and options — TypeScript, props spread, removing fixed sizes or switching colors to
currentColor. - Check the sanitized preview to confirm the icon looks right.
- Copy the component or download it as a
.jsx/.tsxfile and import it in your React or Next.js project.
Why SVG needs converting for React
SVG is XML, and JSX is JavaScript that only looks like HTML. Pasting raw SVG into a React component usually produces warnings such as “Invalid DOM property stroke-width. Did you mean strokeWidth?” or a build error for namespaced attributes like xlink:href and inkscape:label. This converter rewrites the markup into valid JSX and wraps it in a component.
What gets converted
| SVG | JSX |
|---|---|
class="icon" | className="icon" |
stroke-width="2", fill-rule, stop-color | strokeWidth="2", fillRule, stopColor |
xlink:href="#a", xml:space | xlinkHref="#a", xmlSpace |
style="fill-opacity: .5; stroke-linecap: round" | style={{ fillOpacity: 0.5, strokeLinecap: 'round' }} |
data-* and aria-* | Kept as they are (React expects hyphens here) |
<?xml?>, <!DOCTYPE>, comments, <metadata>, editor attributes (Inkscape, Sodipodi, Sketch) | Removed |
onclick and other inline handlers, <script> | Removed — string handlers aren’t valid in React |
Making icons flexible
With Spread props enabled the component ends with {...props} on the <svg>, so you can pass className, width, aria-label or event handlers: <HeartIcon className="h-6 w-6" />. Remove width/height lets CSS size the icon (a viewBox is added from the old size if missing). Colors → currentColor replaces fills and strokes so the icon inherits the text color — ideal for single-color icon sets. The TypeScript option types props as SVGProps<SVGSVGElement>.
Accessibility
For decorative icons next to text, add aria-hidden="true". For meaningful standalone icons, keep a <title> or pass role="img" with an aria-label.
Privacy and safety
The conversion runs entirely in your browser — the SVG never leaves your device. The preview is sanitized: scripts, foreignObject, inline event handlers and external references are stripped before rendering. Building a bundle-based workflow? Tools like SVGR do the same at build time; this page is for quick one-off icons. To use an SVG as a CSS background instead, try SVG to CSS.
Aussi recherché comme : svg to jsx, svg to react, svg to tsx, react svg component, svgr online, jsx converter, svg icon react, classname.
Outils complémentaires : SVG to JSX Converter
- HTML to Markdown — Paste HTML — or copy rich text straight from a web page, Google Doc or email — and get tidy Markdown you can drop into a README, wiki or static site.
- JSON to TypeScript — Paste a JSON sample — an API response, a config — and get ready-to-use TypeScript interfaces with nested types, optional properties and union types.
- Image en Base64 — Convertissez un fichier PNG, JPEG, SVG, WebP ou GIF en URI de données Base64 avec du code CSS et HTML prêt à être copié — ou collez une chaîne Base64 pour prévisualiser et télécharger l'image.
- HTML Formatter — Paste minified or messy markup and get clean, consistently indented HTML — including embedded <style> and <script> blocks.
Questions fréquentes
Why does React warn “Invalid DOM property class”?
class is a reserved word in JavaScript, so React uses className. The same applies to hyphenated SVG attributes, which must be camelCased (stroke-width → strokeWidth). This tool converts them automatically.Should I use xlinkHref or href?
href attribute, and xlink:href is deprecated. React still accepts xlinkHref, so converted code keeps working; you can switch to href if you don’t support very old browsers.How do I change the icon color with CSS?
color of its parent, so className="text-red-500" or style={{ color: "red" }} recolors it.Does the output work in Next.js and Vite?
Does it work for React Native?
react-native-svg, which uses capitalized components such as <Svg> and <Path>. The camelCased attributes from this tool are a good starting point, but rename the elements.