Aller au contenu
SvgJsx
Langue: Français

SVG en TSX : composants d’icônes React typés

Générez des composants React en TypeScript à partir de SVG avec les bons types de props, pour que chaque icône accepte className, les attributs aria et les gestionnaires d’événements avec une autocomplétion complète.

Préréglages:
Déposez des fichiers .svg ici ouLes fichiers sont lus localement avec FileReader et ne sont jamais envoyés.
Options
Export:
import type { SVGProps } from "react";

const HeartIcon = (props: SVGProps<SVGSVGElement>) => (
  <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
631o

Comment fonctionnent les types générés

Les props du composant sont typées SVGProps<SVGSVGElement>, le même type que React utilise pour l’élément <svg>. Vous bénéficiez ainsi de l’autocomplétion pour tous les attributs SVG et gestionnaires d’événements, et TypeScript rejette les props invalides dès la compilation.

Avec l’option size, les props deviennent SVGProps<SVGSVGElement> & { size?: number | string }, et width et height sont définis à partir de size. Avec forwardRef, la ref est typée Ref<SVGSVGElement>, afin que les parents puissent attacher des refs pour des mesures ou des bibliothèques d’animation.

Liste de contrôle du résultat TSX

Avant de commiter une icône générée, vérifiez que :

  • le nom du composant est en PascalCase et correspond au nom du fichier (ArrowLeft.tsx) ;
  • SVGProps et Ref sont importés uniquement comme types et disparaissent donc du bundle JavaScript ;
  • le viewBox est présent : sans lui, l’icône ne peut pas être redimensionnée ;
  • des exports nommés sont utilisés si votre base de code interdit les exports par défaut.

Compatible avec le mode strict

Le code compile avec "strict": true et avec isolatedModules, exigés par Next.js, Vite et esbuild. Aucun type any n’est généré, et la valeur par défaut de size est écrite comme littéral dans le motif de déstructuration.

Questions fréquentes

Faut-il utiliser SVGProps ou ComponentProps<"svg"> ?

Les deux décrivent les mêmes attributs. SVGProps<SVGSVGElement> précise explicitement le type d’élément et c’est celui qu’emploient les définitions de types de React pour <svg> ; le convertisseur l’utilise donc.

forwardRef est-il encore utile avec React 19 ?

React 19 permet aux composants fonction de recevoir ref comme une prop normale : forwardRef y devient facultatif. Il reste utile pour les bibliothèques qui doivent prendre en charge React 18, d’où une option désactivée par défaut.

Pourquoi la prop size est-elle typée number | string ?

Les nombres deviennent des valeurs en pixels, tandis que les chaînes acceptent des unités CSS comme "1em" ou "1.5rem" pour que l’icône suive la taille du texte environnant.

Puis-je convertir tout un dossier d’icônes en TSX ?

Oui. Déposez tous les fichiers d’un coup : chacun devient un fichier .tsx portant le nom du SVG, regroupé dans un ZIP avec un fichier barrel index.ts.