SVG vers JSX — Générateur de composant React

Convertissez du SVG en composant React avec className et attributs camelCase. Export TypeScript optionnel.

Chargement…

SVG vers JSX — guide composant React

Transformez des snippets SVG en composants React sans compilateur lourd. Gère class → className et attributs courants.

Notes développeur

• Blocs <style> intégrés et sprites non supportés en v1. • xlink:href et xmlns convertis pour JSX. • Relisez la sortie avant intégration. • Combinez avec validate-svg pour viewBox/title.

Quand utiliser cet outil

• Intégrer des icônes marketing dans un design system React. • Convertir un SVG design en composant TSX. • Prototyper un nom de composant. • Comprendre les différences d’attributs JSX.

Exemples

Badge avec attributs peu JSX-friendly

Entrée

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc">
  <title id="badge-title">Badge livraison rapide</title>
  <desc id="badge-desc">Badge arrondi avec icône éclair et fond en dégradé.</desc>
  <defs>
    <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f97316"/>
      <stop offset="100%" stop-color="#fb923c"/>
    </linearGradient>
    <clipPath id="badgeClip">
      <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/>
    </clipPath>
  </defs>
  <g clip-path="url(#badgeClip)">
    <rect width="240" height="72" fill="url(#badgeGradient)"/>
    <g transform="translate(20 16)">
      <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/>
      <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/>
    </g>
    <g font-family="Inter, Arial, sans-serif" fill="#fff">
      <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text>
      <text x="76" y="49" font-size="12" fill-opacity="0.92">SVG optimisé prêt à intégrer</text>
    </g>
  </g>
</svg>

Sortie

export default function PromoBadge(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" className="promo-badge" role="img" aria-labelledby="badge-title badge-desc" {...props}>
      <title id="badge-title">Badge livraison rapide</title>
      <desc id="badge-desc">Badge arrondi avec icône éclair et fond en dégradé.</desc>
      <defs>
        <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#f97316" />
          <stop offset="100%" stopColor="#fb923c" />
        </linearGradient>
        <clipPath id="badgeClip">
          <rect x="0" y="0" width="240" height="72" rx="18" ry="18" />
        </clipPath>
      </defs>
      <g clipPath="url(#badgeClip)">
        <rect width="240" height="72" fill="url(#badgeGradient)" />
        <g transform="translate(20 16)">
          <circle cx="20" cy="20" r="20" fill="#0f172a" fillOpacity="0.14" />
          <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z" />
        </g>
      </g>
    </svg>
  )
}

Attribut xlink:href

Entrée

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10"><use xlink:href="#dot"/></svg>

Sortie

Produit xlinkHref sur <use> avec enveloppe composant React.

Outils SVG associés

Optimisez via optimize SVG, validez sur validate SVG, ou le hub SVG.

FAQ SVG vers JSX

Conversion React légère

Supporte-t-il le CSS intégré ?

Pas en v1 — les blocs <style> sont ignorés. Les attributs style inline deviennent des objets.

Export TypeScript ?

Activez l’option TypeScript pour typer props.

Sprites ?

Sprites hors scope — collez un seul <svg> racine.

Autres outils SVG

Minifier SVG Optimiser SVG SVG Viewer SVG vers Data URI Beautifier SVG Déminifier SVGSVG vers JSXRedimensionner SVG Valider SVG

Convertisseurs, encodeurs, formateurs et minificateurs au même endroit ? Outils développeurs Ouvrez le catalogue des outils développeurs.

Outils SVG

SVG vers Data URI

Déminifier SVG

Redimensionner SVG

Voir tout

Outils SVG

SVG vers Data URI

Redimensionner SVG

Minifier

Beautifier

Beautifier JSON

Beautifier HTML

Déminifier

Déminifier CSS

Déminifier JSON

Déminifier HTML

Encodage

Outils JSON

Validateur JSON

Sérialisation

PHP Unserialize