Utiliser une icône SVG en HTML, React et React Native, et changer sa couleur
Guide pour développeurs : SVG inline ou img, currentColor pour les thèmes, le SVG en composant React et react-native-svg sur mobile.
Vous avez une icône SVG, convertie ou dessinée. Les questions qui suivent sont toujours les mêmes : comment la mettre dans la page, comment changer sa couleur depuis le CSS, et comment réutiliser le même fichier dans une application React Native. Voici le parcours complet, avec ses compromis.
Étape 0 : rendre la couleur pilotable
Un SVG converti contient des remplissages littéraux, par exemple fill="#0d1014". Pour le recolorer depuis le CSS, remplacez le remplissage des formes à thématiser par currentColor. L'icône prend alors la couleur CSS de son parent. Gardez des couleurs littérales pour les parties qui doivent rester fixes, comme un accent de marque.
- Icône monochrome : remplacez chaque remplissage par currentColor.
- Icône bicolore : currentColor pour la forme principale, une couleur littérale ou une variable CSS (fill="var(--accent)") pour l'accent.
- Retirez les attributs width et height de la racine, gardez le viewBox et dimensionnez en CSS.
HTML pur : inline ou img
Une balise img (ou un fond CSS) est le plus simple : mise en cache, aucun balisage dans la page, mais la couleur ne peut pas être changée en CSS, et currentColor n'y fait rien. Le SVG inline, collé dans le HTML, se stylise et s'anime, pour quelques centaines d'octets par utilisation. Règle pratique : inline pour les icônes qui changent de couleur ou d'état ; img pour les logos et illustrations qui ne changent pas.
Exemple inline : collez l'élément svg dans la page, définissez color sur un parent, et tous les remplissages currentColor suivent. Pour beaucoup d'icônes, rangez-les dans un svg caché sous forme d'éléments symbol et référencez-les avec use ; le navigateur peint chaque use avec la couleur en vigueur à cet endroit.
React : l'icône comme composant
Transformez le SVG en composant pour qu'il accepte des props. Passez les noms d'attributs en camelCase (stroke-width devient strokeWidth, fill-rule devient fillRule), retirez le xmlns et étalez les props sur la racine pour que className et aria-label passent. Un outil comme SVGR fait exactement cela en ligne de commande ou comme plugin de bundler, de sorte que vous gardez les fichiers .svg et les importez comme composants.
La couleur devient alors une affaire de color CSS sur le composant ou un parent, ou d'une prop color qui définit fill sur la racine. Pour une bibliothèque d'icônes thématisable, currentColor et des variables CSS suffisent ; aucune bibliothèque à l'exécution n'est nécessaire.
React Native : react-native-svg
Les vues natives ne rendent pas le balisage SVG. Le paquet react-native-svg fournit Svg, Path, Circle et les autres éléments sous forme de composants. Convertissez le fichier avec SVGR et son preset native, qui émet ces composants au lieu d'éléments DOM. La taille est explicite (props width et height, viewBox conservé) et la couleur est une prop fill sur les éléments Path ; le schéma habituel est une prop color sur votre composant, transmise à chaque remplissage qui doit suivre le thème.
- Installez react-native-svg (Expo l'inclut).
- Lancez SVGR avec l'option native pour obtenir un fichier de composant par icône.
- Gardez les dégradés simples ; react-native-svg prend en charge les dégradés linéaires et radiaux, mais chacun a besoin d'un bloc Defs, que SVGR génère pour vous.
Gardez le fichier léger
Une icône devrait tenir en une poignée de tracés. Si votre fichier converti en compte des dizaines, la source avait du bruit ou un ombrage ; reconvertissez-la en mode Logo avec moins de couleurs. svgize affiche le nombre de tracés à côté de chaque résultat, vous pouvez donc vérifier avant de livrer. Passez le fichier final dans un optimiseur comme SVGO pour retirer les métadonnées et raccourcir les nombres.