Aller au contenu
SvgJsx
Langue: Français

Convertir un SVG pour React Native (react-native-svg)

React Native ne sait pas afficher directement les balises <svg>. Ce convertisseur réécrit votre SVG avec des composants react-native-svg comme Svg, Path, G et Circle, avec les bons imports.

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 Svg, { G, Path } from "react-native-svg";
import type { SvgProps } from "react-native-svg";

const HeartIcon = (props: SvgProps) => (
  <Svg width="24" height="24" viewBox="0 0 24 24" {...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;

Remarques

  • Les attributs class ont été supprimés car React Native ne les prend pas en charge.

Aperçu

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

Ce qui change pour React Native

react-native-svg fournit un composant avec majuscule pour chaque élément SVG : <path> devient <Path>, <g> devient <G> et <linearGradient> devient <LinearGradient>. Le convertisseur associe chaque élément pris en charge, ajoute une seule ligne d’import contenant uniquement les composants utilisés et type les props avec SvgProps.

Les éléments sans équivalent natif, comme <title>, <desc>, <style> ou <metadata>, sont retirés avec un avertissement pour éviter un plantage à l’exécution. Les attributs class sont également supprimés, puisque React Native n’a pas de classes CSS.

Installer react-native-svg

Pour utiliser le composant généré :

  • Installez la bibliothèque : npx expo install react-native-svg (Expo) ou npm install react-native-svg (React Native sans Expo).
  • Enregistrez le code converti dans un fichier .tsx ou .jsx de votre projet.
  • Affichez-le comme n’importe quel composant en lui passant width, height ou color.
  • Activez currentColor et passez une prop color pour teinter l’icône depuis le parent.

Conseils pour les icônes mobiles

Gardez des icônes simples : les filtres et masques coûtent cher à afficher sur les appareils Android d’entrée de gamme. Arrondissez les coordonnées à une ou deux décimales pour alléger le bundle JavaScript et préférez les remplissages aux contours pour les très petites icônes, car les traits fins peuvent paraître flous sur les écrans non Retina.

Questions fréquentes

Est-ce compatible avec Expo ?

Oui. react-native-svg fait partie du SDK Expo ; installez-le avec npx expo install react-native-svg et le composant généré fonctionne dans Expo Go et dans les development builds.

Pourquoi mon élément <style> a-t-il été supprimé ?

react-native-svg ne prend pas en charge les feuilles de style CSS. Avant la conversion, transformez ces règles en attributs comme fill et stroke ou appliquez-les directement aux éléments.

Comment changer la couleur d’une icône dans React Native ?

Activez currentColor, puis passez color="#ff0000" au composant. react-native-svg résout currentColor à partir de la prop color de l’élément Svg.

react-native-svg-transformer est-il encore nécessaire ?

Non, si vous convertissez vos icônes à l’avance. Le transformer permet d’importer directement des fichiers .svg, alors que cet outil produit des composants classiques qui ne demandent aucune configuration de Metro.