Aller au contenu
Numio

Convertir SVG en composants React Native — Numio

Transforme du balisage SVG en composant React Native qui importe Svg, Path, G et d’autres éléments depuis react-native-svg. L’optimisation SVGO s’exécute d’abord, et les attributs deviennent des props JSX avec les valeurs numériques sous forme de nombres (strokeWidth={2}).

Convertir une icône exportée depuis Figma ou Sketch en composant pour une app Expo ou React Native qui utilise react-native-svg.

SVG

React Native

Quand l’utiliser

  • Convertir une icône exportée depuis Figma ou Sketch en composant pour une app Expo ou React Native qui utilise react-native-svg.
  • Alléger un SVG surchargé (titres, métadonnées d’éditeur, defs inutilisés) avant de le livrer comme composant natif.

Mode d’emploi

  1. Collez du balisage SVG dans l’éditeur SVG ou déposez un fichier .svg ; l’entrée doit être du SVG valide, sinon le message "This is not a valid svg code." s’affiche.
  2. Ouvrez SVGO Settings pour désactiver l’optimisation ou activer et désactiver des plugins individuels comme remove title, remove view box ou merge paths ; l’aperçu sous l’éditeur compare le SVG d’origine et le SVG optimisé.
  3. Copiez la sortie du panneau React Native dans un fichier .js ou .tsx et installez react-native-svg dans votre app.

Balisage SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Check</title>
  <g fill="none" stroke="#16a34a" stroke-width="2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M7 12.5l3 3 7-7"/>
  </g>
</svg>

Composant React Native (react-native-svg)

import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <G fill="none" stroke="#16a34a" strokeWidth={2}>
      <Circle cx={12} cy={12} r={10} />
      <Path d="m7 12.5 3 3 7-7" />
    </G>
  </Svg>
)
export default SvgComponent

Détails et limites

L’optimisation SVGO s’exécute dans un Web Worker de votre navigateur, mais la génération du JSX se fait sur le serveur : le SVG optimisé est envoyé à /api/svg-to-jsx, qui exécute SVGR avec native: true.

Les éléments non pris en charge par react-native-svg sont supprimés, et SVGR ajoute un commentaire comme /* SVGR has dropped some elements not supported by react-native-svg: filter */.

SVGO intègre les règles <style> en ligne puis transforme les déclarations de style en attributs : style="stroke:blue" devient ainsi stroke="#00f" (prop stroke). <title> est supprimé par défaut.

width, height et viewBox sont conservés, et {...props} est étalé sur le Svg racine pour que vous puissiez surcharger la taille ou la couleur.

FAQ

La sortie nécessite-t-elle react-native-svg ?

Oui. Le composant importe Svg et des composants d’éléments comme Path, Circle et G depuis react-native-svg, qui doit être installé dans votre projet ; il ne fonctionne pas avec de simples Views React Native.

Puis-je garder le viewBox pour que l’icône se redimensionne ?

Oui. remove view box est désactivé par défaut, donc viewBox reste sur l’élément Svg. Passez les props width et height lors de l’utilisation du composant pour le redimensionner.

Que deviennent les filtres et les dégradés ?

Les éléments sans équivalent dans react-native-svg, comme filter, sont supprimés avec un commentaire en haut du fichier. Les dégradés inutilisés sont retirés par remove useless defs de SVGO.

Mon SVG est-il envoyé ?

Le SVG optimisé est envoyé à l’endpoint /api/svg-to-jsx de la page pour générer le composant ; l’étape d’optimisation et l’aperçu restent dans votre navigateur.

Spécifications et références