Wie ich ein Symbolsystem aus CSS -benutzerdefinierten Eigenschaften erstellt habe

Erstellen Sie CSS -benutzerdefinierte Attribute in das Symbolsystem

SVG ist zweifellos das beste Format für Website -Symbole. Es bietet klare Symbole, unabhängig von der Bildschirmpixeldichte.

Es gibt viele Möglichkeiten, SVG in eine Webseite aufzunehmen, und jede Technologie hat ihre eigenen Vor- und Nachteile. Ich habe die SASS -Funktion verwendet, um in den letzten Jahren Symbole direkt in meinem CSS zu importieren und mit meinen HTML -Tags zu vermeiden.

Ich habe eine SASS -Liste mit dem gesamten Symbolquellcode. Jedes Symbol wird dann mit der SASS -Funktion als Daten -URI codiert und in einer benutzerdefinierten Eigenschaft im Stamm der Seite gespeichert.

kurz

Was ich hier zur Verfügung stelle, ist eine SASS -Funktion, die eine SVG -Symbibliothek direkt in Ihrem CSS erstellt.

SVG -Quellcode wird durch die SASS -Funktion kompiliert, die ihn als Daten -URI codiert, und speichert dann das Symbol in einer CSS -benutzerdefinierten Eigenschaft. Sie können dann jedes Symbol überall in Ihrem CSS verwenden, genau wie Sie es mit einem externen Bild tun würden.

Dies ist ein Beispiel, das direkt aus meinem persönlichen Website -Code extrahiert wird:

<code>.c-filters__summary h2:after {
  content: var(--svg-down-arrow);
  position: relative;
  top: 2px;
  margin-left: auto;
  animation: closeSummary .25s ease-out;
}</code>

Demo

SASS -Struktur

<code> <p>/ * Alle Icon -Quellcode *///
$ svg-icons: (
  Burger: '& lt; SVG data-line = "" scss
);

/ * SASS -Funktion Codierungssymbol *//
@Function Svg ($ name) {
  @Return URL ('Daten: Image/SVG XML, #{$ codedSvg}');
}

/ * Jedes Symbol in einer benutzerdefinierten Eigenschaft speichern *//
:Wurzel {
  @each $ name, $ code in $ svg-icons {
    --svg- #{$ name}: #{svg ($ name)};
  }
}

/ * Hamburger -Symbol in meine Taste hinzufügen */
.menu :: nach {
  Inhalt: var (-SVG-Burger);
}



</p> Diese Technologie hat sowohl Vor- als auch Nachteile. Berücksichtigen Sie daher diese Faktoren, bevor Sie diese Lösung in Ihrem Projekt implementieren: <h4>


</h4> pros <ul>


<li> </li> Für SVG -Dateien ist keine HTTP -Anforderung erforderlich. <li> </li> Alle Symbole werden an einem Ort gespeichert. <li> </li> Wenn Sie das Symbol aktualisieren müssen, müssen Sie nicht jede HTML -Vorlagendatei durchqueren. <li> </li> Ikonen werden mit CSS zwischengespeichert. <li> </li> Sie können den Quellcode des Symbols manuell bearbeiten. <li> </li> Es verschmutzt Ihre HTML nicht durch Hinzufügen zusätzlicher Tags. <li> </li> Sie können immer noch CSS verwenden, um die Farbe oder einige Aspekte des Symbols zu ändern. </ul> <h4>


</h4> Nachteile <ul>


<li> </li> Sie können CSS nicht verwenden, um Animationen hinzuzufügen oder bestimmte Teile von SVG zu aktualisieren. <li> </li> Je mehr Symbole, desto größer die kompilierte CSS -Datei. </ul> <p>



<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157496146935.jpg" class="lazy" alt="How I Made an Icon System Out of CSS Custom Properties "> Ich verwende diese Technik hauptsächlich für Symbole, nicht für Logos oder Illustrationen. Das codierte SVG ist immer größer als die Originaldatei, daher verwende ich immer noch </p> </code>

Das obige ist der detaillierte Inhalt vonWie ich ein Symbolsystem aus CSS -benutzerdefinierten Eigenschaften erstellt habe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!