Saltar al contenido
SvgJsx
Idioma: Español

Haz que tus iconos SVG usen currentColor

Sustituye los colores fijos de fill y stroke por currentColor para que tus iconos hereden el color de texto de su padre, cambien al pasar el ratón y se adapten al modo oscuro automáticamente.

Ajustes rápidos:
Suelta archivos .svg aquí oLos archivos se leen localmente con FileReader y nunca se suben.
Opciones
Exportación:
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;

Vista previa

Vista previa del SVG convertido
SVG original
706B
SVG optimizado
548B(-22 %)
Componente
692B

Qué hace currentColor

currentColor es una palabra clave de CSS que se resuelve con el valor calculado de la propiedad color del elemento. Cuando un SVG usa fill="currentColor", el icono se pinta con el color que se aplique a su padre, tanto si procede de una clase de Tailwind como del estado hover de un enlace o de una media query de modo oscuro.

Las herramientas de diseño exportan iconos con valores hexadecimales fijos como fill="#111827". Eso ata el icono a un único color y te obliga a mantener archivos distintos para cada tema. Al convertirlo a currentColor, un solo archivo sirve en cualquier contexto.

Qué cambia el convertidor

Con la opción currentColor activada:

  • Los atributos fill y stroke con un valor de color pasan a currentColor.
  • También se sustituyen fill y stroke dentro de los atributos style en línea.
  • Se conservan none, transparent, inherit y las referencias url(#degradado), así que los contornos y degradados siguen funcionando.
  • Otros colores, como stop-color en los degradados, no se modifican.

Cuándo no usar currentColor

Las ilustraciones multicolor, los logotipos de marca y las banderas dependen de varios colores concretos. Sustituirlos todos por uno solo aplana la ilustración. En esos archivos conserva los colores originales o usa propiedades personalizadas de CSS para los pocos colores que quieras adaptar al tema.

Preguntas frecuentes

¿Por qué mi icono se ve negro después de convertirlo?

currentColor hereda la propiedad CSS color. Si el padre no tiene un color definido, los navegadores usan negro por defecto. Define el color en el icono o en un padre, por ejemplo class="text-blue-600".

¿currentColor funciona con trazos?

Sí. Tanto fill como stroke aceptan currentColor; por eso sets de iconos de contorno como Lucide o Heroicons usan stroke="currentColor".

¿Puedo usar currentColor en una etiqueta <img>?

No. Un SVG cargado con <img> o con background-image de CSS está aislado del CSS de la página, así que currentColor se resuelve como negro. El SVG debe estar en línea, que es justo lo que te da un componente.

¿Seguirán funcionando los degradados?

Sí. Los rellenos que hacen referencia a un degradado con url(#id) no se tocan, y los ids referenciados se conservan incluso con la eliminación de ids activada.