Geomicons - ein einzigartiges handcodiertes SVG-Iconset

Web-Iconsets werden schnell zur Norm für modernes Webdesign. Sie sind für Webdesigner ein enormes Gut Icons können über CSS angepasst werden und ohne Qualitätsverlust verkleinert.

Einige Icon-Packs können jedoch aufgebläht und für kleinere Websites zu groß erscheinen. Das ist, wo Geomicons wirklich glänzt.

Das ist ein Benutzerdefiniertes, handcodiertes Icon-Pack, das auf SVG ausgeführt wird. Sie können die Symbole über JS-Skripts oder als direkte SVG-Dateien in Ihre Seite einbetten. So oder so, sie sind wunderschöne Vektoren und lassen sich sehr leicht umgestalten.

Auf der Hauptseite von Geomicons finden Sie eine vollständige Demo aller Symbole. Sie sind ziemlich einfach und folgen dem traditionellen einfarbigen flachen Designstil, den wir alle kennen.

Auf der Demo-Seite fehlen jedoch sicherlich die Setup-Informationen. Wenn Sie wissen möchten, wie Sie dies einrichten, müssen Sie das GitHub-Repo besuchen, um Anweisungen zu erhalten.

Standardmäßig ist dies Die Bibliothek setzt voraus, dass Sie mit CSS / JS arbeiten um diese Symbole direkt in Seitenelemente einbetten zu können. Wenn Sie jedoch die Icons von GitHub herunterladen, erhalten Sie alle rohen SVG-Dateien, die Sie direkt in HTML einfügen können.

Das einzige Problem ist das rohe SVGs erfordern mehr Bearbeitung Farben ändern, während die JS / CSS-Route die Kontrolle über Farben über den Code ermöglicht.

Einfach das hinzufügen geomicons.min.js Skript in Ihre Kopfzeile und übergeben Sie die Daten-Symbol Attribut in HTML-Elemente. Diese werden automatisch Symbole einbetten, die Sie dann mit CSS-Klassen bearbeiten können.

Eine andere Sache, die ich an Geomicons wirklich mag, ist die Unterstützung für Node. Hier ist ein Beispielausschnitt aus dem GitHub-Repo:

var geomicons = requir ('geomicons-open'); var pathData = geomicons.paths.heart; // Gibt den d-Attributwert des Pfads zurück. Var svgString = geomicons.toString ('heart'); // Gibt eine SVG-Zeichenfolge zurück

Wenn Sie sich mit Node nicht auskennen, müssen Sie wahrscheinlich niemals eines der Node-Snippets verwenden. Gleiches gilt für die React.js-Version dieser Symbole.

Noch immer Unterstützung für wichtige Frameworks zu haben, ist eine große Sache. Es ist mehr ein Beweis dafür, dass Geomicons dazu gedacht sind Unterstützung für jede Art von Website indem Sie sich zuerst auf die Leistung konzentrieren.

Um diese Symbole zu testen, können Sie eine Kopie durch npm ziehen oder direkt über GitHub herunterladen.

Es gibt auch ein Gliederungs-Iconset namens Geomicons Wired, das Sie vielleicht auch testen möchten.

So oder so ist das ein brillantes Iconset für minimalistische Webdesigner. Eine perfekte Wahl, um Ihre Website mit schönen Symbolen zu optimieren und gleichzeitig die Seitenladezeiten zu verkürzen.