Wie man mit SVG-Icons arbeitet

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Solide Grundlagen eines SVG-Icon-Systems in diesem Leitfaden von Florens Verschelde, gemischt mit einigen guten Tricks: der Zwei-Farben-Trick, das Vortelesen des Sprites und die Verwendung von benutzerdefinierten Eigenschaften für unbegrenzte Farbvariationen. Auch ein interessanter Punkt über die Verwendung mehrerer Methoden zur Sprite-Einfügung

Ich mische gerne beide Methoden und erstelle zwei Sprites

  1. Ein kleines mit essentiellen Icons (z. B. Haupticons im Seitenheader), das auf jeder Seite inline eingefügt werden soll. Zielgröße: 5 KB oder weniger.
  2. Ein größeres mit allen Icons des Projekts, als externe Datei gehalten. Zielgröße: 50 KB oder weniger.

"Kritische Icons", sozusagen.

Direkter Link →