Zum Inhalt springen
SvgJsx
Sprache: Deutsch

SVG-Icons mit currentColor einfärbbar machen

Ersetze fest codierte fill- und stroke-Farben durch currentColor, damit deine Icons die Textfarbe ihres Elternelements übernehmen, beim Hover die Farbe wechseln und sich automatisch an den Dark Mode anpassen.

Schnellvorlagen:
.svg-Dateien hierher ziehen oderDateien werden lokal mit FileReader gelesen und niemals hochgeladen.
Optionen
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;

Vorschau

Vorschau des konvertierten SVG
Original-SVG
706 B
Optimiertes SVG
548 B(-22 %)
Komponente
692 B

Was currentColor bewirkt

currentColor ist ein CSS-Schlüsselwort, das zum berechneten color-Wert des Elements aufgelöst wird. Nutzt ein SVG fill="currentColor", wird das Icon in der Farbe gezeichnet, die für sein Elternelement gilt – egal ob sie aus einer Tailwind-Klasse, dem Hover-Zustand eines Links oder einer Dark-Mode-Media-Query stammt.

Design-Tools exportieren Icons mit festen Hex-Werten wie fill="#111827". Damit ist das Icon an eine Farbe gebunden, und du musst für jedes Theme eigene Dateien pflegen. Mit currentColor passt eine einzige Datei überall.

Was der Konverter ändert

Mit aktivierter currentColor-Option:

  • fill- und stroke-Attribute mit Farbwert werden zu currentColor.
  • fill und stroke in Inline-style-Attributen werden ebenfalls ersetzt.
  • none, transparent, inherit und url(#verlauf)-Referenzen bleiben erhalten, sodass Umrisse und Verläufe weiter funktionieren.
  • Andere Farben wie stop-color in Verläufen bleiben unverändert.

Wann du currentColor nicht verwenden solltest

Mehrfarbige Illustrationen, Markenlogos und Flaggen leben von mehreren bestimmten Farben. Ersetzt man alle durch eine einzige, wirkt die Grafik flach. Behalte bei solchen Dateien die Originalfarben oder nutze CSS Custom Properties für die wenigen Farben, die sich mit dem Theme ändern sollen.

Häufige Fragen

Warum ist mein Icon nach der Konvertierung schwarz?

currentColor erbt die CSS-Eigenschaft color. Ist beim Elternelement keine Farbe gesetzt, verwenden Browser standardmäßig Schwarz. Setze color am Icon oder an einem Elternelement, zum Beispiel class="text-blue-600".

Funktioniert currentColor auch für Konturen?

Ja. Sowohl fill als auch stroke akzeptieren currentColor – deshalb verwenden Outline-Icon-Sets wie Lucide oder Heroicons stroke="currentColor".

Kann ich currentColor in einem <img>-Tag nutzen?

Nein. Ein über <img> oder CSS background-image geladenes SVG ist vom CSS der Seite isoliert, daher wird currentColor zu Schwarz. Das SVG muss inline eingebunden sein – genau das leistet eine Komponente.

Funktionieren Verläufe weiterhin?

Ja. Füllungen, die per url(#id) auf einen Verlauf verweisen, bleiben unangetastet, und referenzierte IDs werden selbst bei aktiviertem Entfernen von IDs beibehalten.