So ändern Sie die Farben von SVG-Symbolen mit Tailwind

Lesezeit: 5 Minuten

Benutzeravatar von Question3r
Frage3r

Ich verwende TailwindCSS und möchte die Farbe einer SVG-Datei ändern. Ohne Tailwind wurde diese Frage hier schon einmal gestellt, für 2020 sollte dies eine gute Antwort sein, aber Tailwind unterstützt diese Filter nicht. Eine Anleitung dazu gibt es in der Doku wie man mit svg-icons arbeitet aber dieses Tutorial funktioniert ohne Dateien, nur die einfachen Textpfade.

Ich habe die SVG-Dateien heruntergeladen und den Pfad zum SVG den Bildern zugewiesen src Schild. Das folgende Beispiel zeigt mein Problem, ich möchte, dass der Hintergrund des Symbols rot und die Farbe des Symbols blau ist. Leider ist es mir nicht möglich, die Symbolfarbe zu ändern.

<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />

<!-- taken from here https://www.iconfinder.com/icons/765208/media_twitter_social_icon -->
<img class="fill-current bg-red-500 text-blue-500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgd2lkdGg9IjYwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iYmxhY2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBpZD0ic2xpY2UiLz48ZyBmaWxsPSIjMDAwMDAwIiBpZD0idHdpdHRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMDAwMDAwLCAxNi4wMDAwMDApIj48cGF0aCBkPSJNMjguMDUyMTM4NSwyLjQzNjY5NDI3IEMyNi44NDMxODQ2LDEuMDYyMjAxNSAyNS4xMjA1Mzg1LDAuMTg2NDY0MTA1IDIzLjIxNDA2MTUsMC4xNTQ3MzEwMjggQzE5LjU1MzYsMC4wOTM4MDMwOTA1IDE2LjU4NTY1MzgsMy4xODY5MjMzOSAxNi41ODU2NTM4LDcuMDYzMTE2MDQgQzE2LjU4NTY1MzgsNy42MTMyNDExOCAxNi42NDQyOTIzLDguMTQ5NjkzMzcgMTYuNzU3MzY5Miw4LjY2NDY3MzE2IEMxMS4yNDg1ODQ2LDguMzA3MzUyNTcgNi4zNjQ0NjkyMyw1LjQzODc3MDU5IDMuMDk1NDE1MzgsMS4xMTQ3MjE4IEMyLjUyNDg2MTU0LDIuMTUwODYxNyAyLjE5NzkwNzY5LDMuMzYxODgyNzEgMi4xOTc5MDc2OSw0LjY1OTE1MDM3IEMyLjE5NzkwNzY5LDcuMTE0OTg4NDQgMy4zNjgwOTIzMSw5LjI5NDUyNzI0IDUuMTQ2NjMwNzcsMTAuNTgxNDE3NCBDNC4wNjAxMjMwOCwxMC41MzM0NDk5IDMuMDM4MDY5MjMsMTAuMjA0NTM3OCAyLjE0NDQzODQ2LDkuNjY0OTUyMDMgQzIuMTQzNzkyMzEsOS42OTQ0NDQ5NyAyLjE0Mzc5MjMxLDkuNzIzOTQ0OTQgMi4xNDM3OTIzMSw5Ljc1Mzk2MjQ1IEMyLjE0Mzc5MjMxLDEzLjE4MzU0OTcgNC40Mjg1OTIzMSwxNi4wNjA3MDc2IDcuNDYwODMwNzcsMTYuNzMwOTM4MyBDNi45MDQ2NTM4NSwxNi44ODg1MzggNi4zMTkwNzY5MiwxNi45NzEwMTYzIDUuNzE0NiwxNi45NjcwMDggQzUuMjg3NDkyMzEsMTYuOTY0MTc1OCA0Ljg3MjE3NjkyLDE2LjkxNjgxMTggNC40Njc1MjMwOCwxNi44MzE3NjggQzUuMzEwOTE1MzgsMTkuNjQ0Mzc3NyA3Ljc1ODcwNzY5LDIxLjY5Njc2NjMgMTAuNjU5MjkyMywyMS43NjQ2MjggQzguMzkwODA3NjksMjMuNjQ3Njk2MyA1LjUzMjg2OTIzLDI0Ljc2OTE5MzMgMi40MjcyOTIzMSwyNC43NjI3ODcgQzEuODkyMjc2OTIsMjQuNzYxNjgzMyAxLjM2NDY5MjMxLDI0LjcyNzExMiAwLjg0NjE1Mzg0NiwyNC42NjA1OTk2IEMzLjc3OTUzMDc3LDI2LjY3MzMxMzkgNy4yNjM1OTIzMSwyNy44NDUxNzExIDExLjAwNjc2MTUsMjcuODQ2MTUzMSBDMjMuMTk4NTUzOCwyNy44NDkzNTE4IDI5Ljg2NTczMDgsMTcuMjM5NTEwOSAyOS44NjU3MzA4LDguMDM2NzY4NjggQzI5Ljg2NTczMDgsNy43MzQ4MzYzMiAyOS44NTkxMDc3LDcuNDM0NTE5MTIgMjkuODQ2NTA3Nyw3LjEzNTY1MTk1IEMzMS4xNDE1NjE1LDYuMTcwNjY2NDUgMzIuMjY1MjIzMSw0Ljk2MDc4OTE1IDMzLjE1Mzg0NjIsMy41NzkyMTkwMSBDMzEuOTY1MjQ2Miw0LjExNTAxNjE1IDMwLjY4NzYzODUsNC40NzA4Njg2MyAyOS4zNDcwMzA4LDQuNjIwMTM3ODkgQzMwLjcxNTQyMzEsMy43Nzc5NjUxOCAzMS43NjY1NTM4LDIuNDMwMDk2MDcgMzIuMjYxMzQ2MiwwLjgxMzc1ODQwNCBDMzAuOTgwNTA3NywxLjU5MDQ5MjI5IDI5LjU2MjAzODUsMi4xNDc1MTI4NiAyOC4wNTIxMzg1LDIuNDM2Njk0MjcgWiIvPjwvZz48L2c+PC9zdmc+">

Was ist der richtige Arbeitsablauf beim Herunterladen von SVG-Symbolen und deren direkter Verwendung durch Verknüpfen des Asset-Pfads? Alles, was ich erreichen möchte, ist so etwas

<a href="https://twitter.com" target="_blank">
  <img src="pathToSvgInAssetsFolder" />
</a>

und stellen Sie die Symbolfarbe auf eine benutzerdefinierte Tailwind-Farbe ein, z red-500. Wenn ich also die Symbolfarbe ändern möchte, kann ich einfach die Farbklasse ändern.

Weiß jemand wie man das macht?

  • Es gibt keinen Arbeitsablauf für die Verwendung von SVG als Bilder, es sei denn, das SVG ist genau so gestaltet, wie Sie es haben möchten. Warum nicht Inline-SVG verwenden?

    – JHeth

    5. Oktober 2020 um 3:59 Uhr

  • Entschuldigung, was meinst du? Ich habe das versucht jsfiddle.net/e0o8ctmg

    – Frage3r

    5. Oktober 2020 um 5:20 Uhr

  • Dies wird hilfreich sein tailwindcss.com/docs/fill

    – Parth-Entwickler

    18. Mai 2021 um 9:54 Uhr

Der Workflow zum Hinzufügen von SVG zu Ihrem Tailwind-Projekt sollte mit ausgeführt werden Inline-SVG.

Adam Watham, der Schöpfer von Tailwind CSS, hat a Video über die Arbeit mit Inline-SVG in Tailwind. In dem Video zeigt er einen Arbeitsablauf, den Sie verwenden würden, um ein nicht optimiertes SVG für ein Tailwind-Projekt vorzubereiten. Hier sind die Schritte mit einem zusätzlichen Schritt, den er nicht erwähnt hat:

  1. Legen Sie die SVG-Datei ab oder fügen Sie das SVG-Markup in den Optimierer unter ein SVGOMG.
  2. Kopieren Sie das von SVGOMG bereitgestellte Markup und fügen Sie es in Ihr Projekt ein.
  3. Entfernen Sie alle Füll- oder Strichattribute, damit Tailwind diese mit Klassen ändern kann (nicht im Video gezeigt).
  4. Entfernen Sie alle XMLNS-Attribute oder XML-Tags, diese werden für Inline-SVG nicht benötigt.
  5. Tailwind-Klassen hinzufügen.

Wenn Sie ein komponentenbasiertes Framework verwenden, wird dies ebenfalls empfohlen Extrakt die Symbole in Komponenten umwandeln, die in Ihrer gesamten Anwendung wiederverwendet werden können.

Die Vorteile dieses Ansatzes:

  • Volle Kontrolle über die Größe und Farbe Ihrer SVG-Symbole
  • Schnellere Ladegeschwindigkeit, da die Symbole Teil des HTML sind

Hier ist ein Beispiel, das auf der Fiddle basiert, die Sie in den Kommentaren geteilt haben. Ich habe die SVGs durch SVGOMG laufen lassen und die Füllattribute entfernt, damit Tailwind das kontrollieren kann.

<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />

<svg class="text-teal-500 fill-current h-16 w-16" viewBox="0 0 60 60">
    <path d="M41.05 18.44a6.6 6.6 0 00-4.84-2.29c-3.66-.06-6.62 3.04-6.62 6.91 0 .55.05 1.09.17 1.6a18.68 18.68 0 01-13.66-7.55 7.33 7.33 0 00-.9 3.55 7.3 7.3 0 002.95 5.92 6.34 6.34 0 01-3-.92v.1c0 3.42 2.28 6.3 5.31 6.97a6.24 6.24 0 01-3 .1 6.74 6.74 0 006.2 4.93 12.8 12.8 0 01-9.81 2.9A17.89 17.89 0 0024 43.85c12.19 0 18.86-10.61 18.86-19.81l-.02-.9c1.3-.97 2.42-2.18 3.3-3.56-1.18.54-2.46.9-3.8 1.04a6.8 6.8 0 002.91-3.8c-1.28.77-2.7 1.33-4.2 1.62z"/>
</svg>

<svg class="bg-red-500 text-red-800 fill-current h-16 w-16 rounded-lg" viewBox="0 0 60 60">
    <path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z"/>
</svg>

  • Schritt 5 sagt Tailwind-Klassen hinzufügen. Tun wir etwas anderes als Füllen, Schlaganfall und Strichbreite? Ich habe mich gefragt, ob die Antwort genauer sein sollte?

    – notapatch

    27. Januar 2022 um 12:11 Uhr

  • Für mich war das fehlende Teil die Füllstrom Klasse

    – Pjotr

    26. August 2022 um 11:03 Uhr

  • Ich habe das versucht und das SVG nimmt die Farbe nicht auf. Sind diese Anweisungen noch korrekt?

    – Mel

    7. Januar um 3:35

  • @Mel es funktioniert immer noch bei Tailwind Play play.tailwindcss.com/vsSEXCEuTq auf dem die aktuellste Version von Tailwind ausgeführt wird. Läuft Ihr Tailwind-CLI-Build-Prozess?

    – JHeth

    7. Januar um 5:26

In einfachen Worten verwenden text-<color> und fill-current

<svg class="h-16 w-16 rounded-full bg-cyan-400 fill-current text-white" viewBox="0 0 60 60">
  <path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z" />
</svg>

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

1441690cookie-checkSo ändern Sie die Farben von SVG-Symbolen mit Tailwind

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy