Referenzieren Sie SVG-Bilder in CSS, um den Implementierungscode für dynamische Farbumschaltung zu unterstützen

Wenn wir ein SVG-Bild zur Anzeige hinzufügen, erhalten wir von React die Meldung, dass die Datei nicht gefunden werden kann.

Wir können eine Deklaration des Bildtyps in der globalen Datei global.d.ts hinzufügen:

Weitere Einzelheiten finden Sie unter „TypeScript meldet, dass die Ressourcendatei nach dem Verweisen darauf nicht gefunden werden kann“.

Nach der Deklaration wird von der Referenz kein Fehler mehr gemeldet. Anschließend schauen wir uns das SVG-Bild an, welches Farben und weitere Einstellungen hat:

<?xml version="1.0" encoding="UTF-8"?>
<svg Breite="24px" Höhe="24px" Ansichtsbox="0 0 24 24" Version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Fenster_Rückgabe</title>
    <g id="Steuerung" Strich="keine" Strichbreite="1" Füllung="keine" Füllregel="gerade ungerade">
        <g id="Fenster_Rückkehr">
            <rect id="Rechteck-6" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
            <path d="M8.35417135,12.9957726 C8.13320936,12.7345458 8,12.3967967 8,12.0279541 C8,11.6586058 8.13357489,11.3204363 8.3550807,11.0590615 L8.3521103,11.0564202 L14.356041,4.51971371 L14.3599873,4.52318728 C14.635253,4.20288524 15.0434555,4 15.4990737,4 C16.3280124,4 17,4.67157288 17,5.5 C17,5.8870199 16.8533375,6.23980607 16.6125263,6.50587693 L16.6210783,6.51340439 L11.5390798,12.0228281 L16.5124905,17.3935277 C16.8121157,17.6677653 17,18.0619548 17,18.5 C17,19.3284271 16.3280124,20 15.4990737,20 C15.0262153,20 14.6044287,19.7814702 14.3293154,19.439953 L8.35278214,12.9970098 L8.35417135,12.9957726 L8.35417135,12.9957726 Z" id="Oval-43-Copy-3" fill="#808080"></path>
        </g>
    </g>
</svg>

Ist es möglich, basierend auf einem SVG verschiedene Effekte anzuzeigen? Beispiel: Hervorhebung nach dem Hovern

Theoretisch ist es möglich, eine XML-Codeanalyse hinzuzufügen und dann die SVG-Wiedergabe als Komponente hinzuzufügen.

Nachdem ich im Internet gesurft hatte, stellte ich fest, dass die meisten davon nicht sehr praktisch sind. Viele von ihnen laden globale Bilder und verwenden sie als separate Komponenten oder Caches, was nicht geeignet ist.

reagieren-inlinesvg

Ich habe eine ziemlich gute Open Source gefunden, sie ist super gut, ich empfehle sie!

https://github.com/gilbarbara/react-inlinesvg

Installation: npm i react-inlinesvg oder yarn addreact-inlinesvg

Referenz hinzufügen: import SVG from 'react-inlinesvg';

Fügen Sie ein Bild hinzu:

importiere BackPng aus '../../../../assets/images/back.svg';
<SVG-Klassenname="backIcon" src={BackPng} />

So legen Sie dynamische Stile fest:

&:schweben {
    Weg {
      Füllung: #4ecb78;
    }
    .backContent {
      Farbe: #4ecb78;
    }
  }
  &:aktiv {
    Weg {
      Füllung: #2baf57;
    }
    .backContent {
      Farbe: #2baf57;
    }
  } 

Damit ist dieser Artikel über den Implementierungscode zum Referenzieren von SVG-Bildern in CSS zur Unterstützung dynamischer Farbwechsel abgeschlossen. Weitere relevante Inhalte zu dynamischen Farbwechseln in CSS und SVG finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!