de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Geomicons - Ein einzigartiges handkodiertes SVG Iconset

Web Iconsets werden schnell zur Norm für modernes Webdesign. Sie sind ein großer Vorteil für Webdesigner, da diese Symbole durch CSS angepasst und ohne Qualitätsverlust angepasst werden können.

Aber einige Icon Packs können aufgebläht und zu groß für kleinere Sites sein. Das ist, wo Geomicons wirklich glänzt.

Dies ist ein benutzerdefiniertes handgeschriebenes Icon Pack, das auf SVG läuft . Sie können die Symbole durch JS-Skripts oder als direkte SVG-Dateien in Ihre Seite einbetten. Wie auch immer, sie sind schöne Vektoren und super einfach zu restaurieren.

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

Aber ihre Setup-Informationen fehlen auf der Demo-Seite. Wenn Sie lernen möchten, wie Sie dies einrichten, müssen Sie das GitHub Repo für Anweisungen besuchen.

Standardmäßig geht diese Bibliothek davon aus, dass Sie mit CSS / JS arbeiten, um diese Symbole direkt in Seitenelemente einzubetten. Wenn Sie die Icons von GitHub herunterladen, erhalten Sie alle rohen SVG-Dateien, die Sie direkt in HTML einfügen können.

Das Problem ist nur, dass rohe SVGs mehr Bearbeitung benötigen, um Farben zu ändern, während die JS / CSS-Route Ihnen die Kontrolle über Farben über den Code gibt.

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

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

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

Wenn Sie mit Node nicht vertraut sind, werden Sie wahrscheinlich nie eines der Node-Snippets verwenden müssen. Gleiches gilt für die React.js-Version dieser Symbole.

Immer noch Unterstützung für wichtige Frameworks ist eine große Sache. Es ist ein weiterer Beweis dafür, dass Geomicons jede Art von Website unterstützen sollen, indem sie sich zuerst auf die Leistung konzentrieren.

Um diesen Icons einen Testlauf zu geben, können Sie eine Kopie über npm ziehen oder direkt über GitHub herunterladen.

Es gibt auch ein Umriss-Iconset namens Geomicons Wired, das Sie ebenfalls testen können.

So oder so, das ist ein brillantes Iconset für minimalistische Webdesigner . Eine perfekte Wahl für die Optimierung Ihrer Website mit schönen Symbolen bei sinkenden Ladezeiten.

JavaScript-Jargon: 10 Begriffe, die Sie kennen sollten

JavaScript-Jargon: 10 Begriffe, die Sie kennen sollten

Vom Currieren bis zum Schließen gibt es eine ganze Reihe von JavaScript-Jargons (spezielle Wörter, die im Feld verwendet werden), die Ihnen nicht nur helfen, Ihr Vokabular zu erweitern, sondern auch JavaScript besser zu verstehen. Jargons sind normalerweise in Dokumentationen und technischen Artikeln zu finden .

(Tech- und Design-Tipps)

So fügen Sie benutzerdefinierte Code-Snippets zu Atom hinzu

So fügen Sie benutzerdefinierte Code-Snippets zu Atom hinzu

Es ist kein Zufall, dass Atom, der von Github entwickelte Quellcode-Editor, in der Webentwicklungs-Community beliebt ist. Es ist nicht nur einfach erweiterbar mit Tausenden von Atom-Paketen, und hat eine breite Sprachunterstützung, aber fast jeder Teil kann vom Benutzer angepasst werden.Durch die Nutzung der Funktion " Snippets" von Atom können Sie Ihren Codierungsworkflow produktiver gestalten, da wiederkehrende Code-Snippets wiederverwendet werden können, um den sich wiederholenden Teil Ihrer Arbeit zu reduzieren. I

(Tech- und Design-Tipps)