Aller au contenu
SvgJsx
Langue: Français

Faire utiliser currentColor à vos icônes SVG

Remplacez les couleurs fill et stroke codées en dur par currentColor pour que vos icônes héritent de la couleur du texte de leur parent, changent au survol et s’adaptent automatiquement au mode sombre.

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 type { SVGProps } from "react";

const HeartIcon = ({ size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: number | string }) => (
  <svg viewBox="0 0 24 24" className="icon icon-heart" width={size} height={size} {...props}>
    <g id="Layer_1" fill="none" stroke="currentColor" 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: "currentColor" }} />
    </g>
  </svg>
);

export default HeartIcon;

Aperçu

Aperçu du SVG converti
SVG d’origine
706o
SVG optimisé
548o(-22 %)
Composant
692o

Ce que fait currentColor

currentColor est un mot-clé CSS qui correspond à la valeur calculée de la propriété color de l’élément. Lorsqu’un SVG utilise fill="currentColor", l’icône est peinte avec la couleur appliquée à son parent, qu’elle provienne d’une classe Tailwind, de l’état de survol d’un lien ou d’une media query de mode sombre.

Les outils de design exportent les icônes avec des valeurs hexadécimales fixes comme fill="#111827". L’icône est alors figée dans une seule couleur et vous oblige à gérer des fichiers différents pour chaque thème. Avec currentColor, un seul fichier convient partout.

Ce que modifie le convertisseur

Lorsque l’option currentColor est activée :

  • les attributs fill et stroke ayant une valeur de couleur deviennent currentColor ;
  • fill et stroke à l’intérieur des attributs style en ligne sont aussi remplacés ;
  • none, transparent, inherit et les références url(#dégradé) sont conservés, si bien que les contours et dégradés fonctionnent toujours ;
  • les autres couleurs, comme stop-color dans les dégradés, restent inchangées.

Quand éviter currentColor

Les illustrations multicolores, les logos de marque et les drapeaux reposent sur plusieurs couleurs précises. Les remplacer toutes par une seule aplatit le visuel. Pour ces fichiers, conservez les couleurs d’origine ou utilisez des propriétés personnalisées CSS pour les quelques couleurs à adapter au thème.

Questions fréquentes

Pourquoi mon icône est-elle noire après conversion ?

currentColor hérite de la propriété CSS color. Si le parent n’a aucune couleur définie, les navigateurs utilisent le noir par défaut. Définissez color sur l’icône ou sur un parent, par exemple class="text-blue-600".

currentColor fonctionne-t-il avec les contours ?

Oui. fill comme stroke acceptent currentColor ; c’est pourquoi les jeux d’icônes au trait comme Lucide ou Heroicons utilisent stroke="currentColor".

Puis-je utiliser currentColor dans une balise <img> ?

Non. Un SVG chargé via <img> ou background-image en CSS est isolé du CSS de la page, et currentColor y vaut noir. Le SVG doit être intégré en ligne, ce que permet justement un composant.

Les dégradés fonctionneront-ils encore ?

Oui. Les remplissages qui référencent un dégradé avec url(#id) ne sont pas modifiés, et les id référencés sont conservés même lorsque la suppression des id est activée.