SVG → React
Du JSX prêt à coller depuis n'importe quel fichier SVG — attributs renommés comme React les attend, props étalées sur la racine, TypeScript si tu en as besoin.
ou clique pour parcourir — SVG uniquement
Le nom du composant vient du nom de fichier : arrow-left.svg devient donc ArrowLeft.
Le même composant, typé en SVGProps<SVGSVGElement>.
Juste le balisage, à coller dans un composant que tu as déjà.
des icônes comme composants
Le JSX ressemble à du balisage mais c'est du JavaScript. Les attributs à trait d'union comme stroke-width ne sont pas des identifiants valides, class entre en collision avec un mot réservé, et les accolades d'un style en ligne sont lues comme des expressions. Un SVG copié directement depuis un outil de design échoue en général à compiler pour au moins une de ces raisons.
Ce convertisseur renomme ce qui doit l'être et laisse le reste tranquille. Les attributs data- et aria- gardent leurs traits d'union, parce que React les transmet tels quels — les renommer est une façon courante de perdre discrètement un libellé d'accessibilité.
trois étapes
Choisis un fichier .svg — il reste sur ton appareil.
Le composant complet, son jumeau TypeScript, ou le JSX nu.
Importe-le comme n'importe quel composant et style-le avec des props.
réponses rapides
Pour que ce que tu passes l'emporte. En JSX, un attribut placé plus loin écrase le précédent : avec l'étalement en dernier, tu peux définir className, width ou un onClick depuis l'extérieur. Placé en premier, les valeurs figées dans le fichier écraseraient les tiennes en silence.
Remplace le fill ou le stroke codé en dur de la sortie par currentColor, puis définis la couleur en CSS sur n'importe quel parent. Si les couleurs sont éparpillées sur de nombreux nœuds, passe d'abord le fichier dans le changeur de couleurs SVG — il peut toutes les basculer sur currentColor d'un coup.
Pas directement. React Native n'a pas de DOM : le SVG y demande react-native-svg et des noms d'éléments capitalisés comme Svg et Path. Le renommage d'attributs montré ici reste la bonne forme, mais les imports et les balises diffèrent.
C'est le fichier source — un SVG minifié reste minifié, car le reformatage est un autre travail. Passe-le d'abord dans l'embellisseur SVG et le composant sortira avec une indentation lisible.
Non. La conversion est un simple traitement de chaîne effectué dans ton navigateur.