Aller au contenu
SvgJsx
Langue: Français

Convertir un SVG en composant React

Transformez n’importe quelle icône ou illustration SVG en composant React fonctionnel, avec des attributs prêts pour JSX, la transmission des props et des props optionnelles de taille et de couleur.

Préréglages:
Déposez des fichiers .svg ici ouLes fichiers sont lus localement avec FileReader et ne sont jamais envoyés.
Options
Export:
const HeartIcon = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

Aperçu

Aperçu du SVG converti
SVG d’origine
706o
SVG optimisé
538o(-24 %)
Composant
566o

Pourquoi ne pas coller le SVG directement dans React ?

Coller un SVG brut dans un fichier .jsx produit généralement une avalanche d’avertissements comme « Invalid DOM property stroke-width » ou « Invalid DOM property class », voire une erreur de compilation si le fichier contient un attribut style ou une déclaration XML. Renommer chaque attribut à la main est lent et source d’erreurs pour de grands jeux d’icônes.

Ce convertisseur effectue le renommage pour vous et enveloppe le balisage dans un composant qui accepte des props. Comme {...props} est appliqué sur le <svg> racine, vous pouvez passer className, aria-label, onClick ou une largeur personnalisée depuis le parent sans retoucher l’icône.

Réglages recommandés pour les icônes React

Pour un composant d’icône réutilisable, nous conseillons de :

  • Activer currentColor pour que l’icône hérite de la couleur du texte du parent et fonctionne en mode sombre.
  • Activer la prop size pour contrôler largeur et hauteur avec une seule valeur, par exemple size={20}.
  • Conserver le viewBox et supprimer width et height fixes pour que l’icône s’adapte au CSS.
  • N’utiliser forwardRef que si un parent a besoin de l’élément <svg>, par exemple pour des infobulles ou des animations.

Composants en ligne ou fichiers image ?

Les composants SVG en ligne peuvent être stylés en CSS, animés et changer de couleur au survol, sans jamais déclencher de requête réseau supplémentaire. Pour de grandes illustrations qui ne changent pas, un simple <img src="/file.svg"> peut être plus économique, car le navigateur le met en cache séparément. Utilisez des composants pour les icônes et éléments d’interface, et des balises image pour les illustrations lourdes.

Questions fréquentes

Quelles versions de React sont prises en charge ?

Le résultat est un composant fonction classique compatible avec React 16.8 et versions ultérieures, y compris React 18 et 19. forwardRef et memo sont optionnels et importés uniquement si vous les activez.

Faut-il importer React dans le fichier généré ?

Non. Avec la transformation JSX moderne utilisée par Next.js, Vite et Create React App 4+, React n’a pas besoin d’être dans la portée. Le convertisseur n’importe que ce que le composant utilise réellement.

Comment changer la couleur de l’icône depuis le parent ?

Activez l’option currentColor. Les remplissages et contours sont remplacés par currentColor, et l’icône prend la couleur CSS de son parent, par exemple via la classe Tailwind text-red-600.

Puis-je passer onClick ou aria-label à l’icône ?

Oui. Le composant applique {...props} sur le <svg> racine : tout attribut SVG ou gestionnaire d’événement transmis est relayé et remplace les valeurs par défaut.