Les pubs vous déplaisent ? Aller Sans pub Auj. 

Convertisseur SVG en composant React JSX

PromoteurTexte

ANNONCE · Supprimer ?

SAISIR

Processus automatique

SORTIR

Côté client

ANNONCE · Supprimer ?

Guide

Convertisseur SVG en composant React JSX

Paste raw SVG markup and get a clean React functional component back. The tool applies deterministic camelCase conversion for every attribute, drops non-JSX syntax, and wraps the output in a ready-to-import component — optionally typed, optionally forwardRef-wrapped, and optionally resized via props. Everything runs locally in your browser, so your icons and logos never leave your machine.

Comment utiliser

Paste the full <svg>…</svg> markup into the input box.
Set a component name (PascalCase, like ArrowRightIcon).
Toggle TypeScript, forwardRef, scalable size props, and prop spreading to fit your project.
Copy the generated JSX or download it as a .tsx / .jsx fichier.

Caractéristiques

camelCase attributes – stroke-width devient strokeWidth, fill-rule devient fillRule, and so on across the full SVG spec.
Reserved word handling – class is rewritten to className, for à htmlForet xlink:href à xlinkHref.
Inline style parser – style="color: red; font-size: 12px" is converted to a JSX style object with camelCase keys.
TypeScript output – generates React.SVGProps<SVGSVGElement> typings when enabled.
Scalable icon mode – swap the hard-coded width/height for width et height props with sensible defaults.
forwardRef wrapper – emit a React.forwardRef component with a displayName for DevTools.
Prop spreading – forward arbitrary props onto the root <svg> so consumers can set className, ARIA, or event handlers.
Offline by design – the SVG never leaves the browser; no uploads, no server round-trips.

 FAQ

Why do React and JSX rewrite SVG attribute names?

JSX compiles directly to JavaScript object property access, and JavaScript identifiers cannot contain hyphens. React therefore standardizes on camelCase property names that mirror the DOM IDL — for example, stroke-width devient strokeWidth because the DOM exposes it as element.strokeWidth. A handful of attributes (class, for) collide with JavaScript reserved words and are renamed (className, htmlFor) to avoid parser conflicts.
What does React.forwardRef do for an SVG component?

By default, a functional component cannot receive a ref from its parent — React silently ignores it. React.forwardRef exposes the underlying DOM node to the parent, which is essential when you need direct access to the rendered <svg> for focus management, measurement, or integration with animation libraries like Framer Motion or GSAP.
Why should SVGs be embedded as React components instead of inline images?

Embedding SVG as JSX gives you full control over the DOM tree: you can theme strokes and fills via CSS variables, animate individual paths, swap colors at runtime, and tree-shake unused icons at build time. An <img src="icon.svg"> behaves as an opaque raster-like element — you cannot style its internals from the host page.
Why keep width and height as props rather than hard-coded attributes?

Hard-coded pixel dimensions pin the icon at a single size and make it awkward to compose inside a layout. Exposing width et height as props (often paired with the original viewBox) lets consumers render the same component at 16px in a toolbar and 48px in a hero banner, with SVG's vector scaling preserving crispness at every size.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?