Convertir SVG en composant React

Non. La conversion se fait entièrement dans votre navigateur. Le fichier ne quitte jamais votre appareil – aucun serveur ne peut le voir. Une fois la page chargée, l'outil fonctionne même hors ligne.

Enregistrez le fichier à côté de votre code et importez-le : import MyIcon from "./MyIcon"; Tout ce que vous passez au composant va à l'élément <svg>, donc <MyIcon className="h-6 w-6" aria-hidden="true" /> fonctionne comme prévu. Le composant porte le nom du fichier, en PascalCase.

Les attributs sont renommés en forme JSX (stroke-width → strokeWidth, class → className, xlink:href → xlinkHref), les styles en ligne deviennent des objets style, et le prologue XML, les commentaires et le DOCTYPE sont supprimés. Sauf si vous désactivez « Optimiser d'abord », le SVG passe aussi par le même optimiseur que « Optimiser un SVG », ce qui raccourcit nettement le code.

Les scripts, gestionnaires d'événements, images et feuilles de style externes sont supprimés avant de générer le composant – vous ne livrez jamais de code étranger par accident.

Par défaut, vous obtenez un fichier .tsx dont les props sont typées SVGProps<SVGSVGElement>. Désactivez « TypeScript » pour un simple fichier .jsx sans types.