Sprites hors scope — collez un seul racine.

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

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

Options

Nom du composant

Export par défaut

TypeScript

Résultat de conversion

Prêt

Collez un SVG et cliquez sur Convertir en JSX pour voir le résumé ici.

Entrée SVG

0car.0 B1lignes

Sortie JSX

0car.0 B1lignes

Conversion via DOMParser locale — aucun envoi.

Partager cet outil:

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.

Options

Nom du composant

Identifiant de la fonction React générée (ex. SvgIcon).

Export par défaut

Activé : export default function … ; désactivé : export nommé.

TypeScript

Ajoute une signature de props typée (attributs SVGSVGElement) pour un drop-in TSX.

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.

Outils SVG

Prévisualisez, optimisez avec SVGO, exportez en Data URI, redimensionnez, formatez, convertissez en JSX et validez vos SVG — tout dans le navigateur.

Valider SVG

SVG Viewer

Optimiser SVG

Redimensionner SVG

SVG vers Data URI

Découvrez les autres catégories d'outils

Minifier

Réduisez code et assets pour la production — minifiez JS, CSS, HTML, JSON, XML et SVG avant gzip ou déploiement CDN.

Déminifier

Développez du code minifié ou compressé — déminifiez JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML et d'autres formats pour déboguer ou relire.

Conversion

Transformez des données entre JSON, YAML, XML et CSV localement — sans envoi serveur.

Encodage

Encodez ou décodez Base64, composants URL et entités HTML — uniquement côté client.

Sérialisation

Sérialisez et désérialisez des structures PHP à côté de vos flux JSON.

Outils JSON

Validez, formatez, comparez et explorez des payloads JSON — complémentaires aux minificateurs et convertisseurs.

Beautifier

Rendez le code lisible avec une indentation cohérente — beautifiez JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML et plus encore dans votre navigateur.

Préprocesseurs CSS

Compilez SCSS ou LESS en CSS standard dans le navigateur — complétez avec beautify ou minify pour un workflow feuille de style complet.

Outils couleur & CSS

Vérification de contraste WCAG en collage local avec syntaxe couleur CSS moderne — vues paire et matrice, jamais envoyé.

DevOps & Infra

Format/validate/minify HCL, format & lint Dockerfile, validation Compose et .env.

CI/CD

GitHub Actions et GitLab CI — formater le YAML et vérifier la structure des workflows/jobs dans le navigateur.

Logs & observabilité

JSON/NDJSON ligne à ligne et access logs Nginx/Apache — format, filtre, validation et CSV/TSV.

Kubernetes

Manifestes multi-docs, validation structurelle, starters Ingress/Deployment et formatage values Helm.

Réseau / IP

CIDR, sous-réseaux et helpers IPv4/IPv6 — dans le navigateur.

Sécurité & tokens

JWKS, certificats X.509 et scan de secrets — locaux navigateur.

API & schémas

Outils OpenAPI pour formater, valider et analyser vos specs.

Outils HTTP

cURL, messages HTTP, URLs, HAR et Cookie / Set-Cookie collés dans le navigateur — formater et inspecter, jamais envoyé.

Outils SEO / Web

Générez meta tags, Open Graph et Twitter Card localement — aperçus simulés depuis vos saisies, jamais fetch de votre site live.

Utilitaires développeur

Timestamps, UUID, ULID, Nanoid, cron, mots de passe, regex, slugify, bases, casse, diff texte et chmod — tout côté client.

Texte & Markdown

Comptez, générez un sommaire Markdown et nettoyez des listes de lignes — dans le navigateur.

IA & LLM

Comptage de tokens, estimation des coûts et fenêtre de contexte — 100 % local.

Données de test

Valeurs de champs synthétiques pour fixtures et seed DB — d'abord des numéros de téléphone en plages réservées.

Étiquettes code-barres

Dessinez des étiquettes Code 128, EAN-13 et UPC-A dans le navigateur — téléchargement PNG et SVG, pas un lookup GS1.