Geomicons - Un set di icone SVG con codice mano unico

Le iconset Web stanno rapidamente diventando la norma per il web design moderno. Sono enormi risorse per i web designer come questi le icone possono essere personalizzate tramite CSS e ridimensionato senza alcuna perdita di qualità.

Ma alcuni pacchetti di icone possono sembrare gonfiati e troppo grandi per i siti più piccoli. Ecco dove Geomicons brilla davvero.

Questo è un icon pack personalizzato con codifica a mano in esecuzione su SVG. Puoi incorporare le icone tramite gli script JS o come file SVG diretti nella tua pagina. In ogni caso, sono vettori bellissimi e super facili da restyling.

La pagina principale di Geomicons presenta una demo completa di tutte le icone. Sono piuttosto semplici e seguono il tradizionale stile di design piatto a un colore che tutti conosciamo.

Ma le loro informazioni di installazione sono sicuramente carenti nella pagina demo. Se vuoi sapere come impostarlo devi visitare il repository GitHub per istruzioni.

Di default, questo la libreria presume che tu stia lavorando con CSS / JS per avere queste icone incorporate direttamente negli elementi della pagina. Tuttavia, quando scarichi le icone da GitHub ottieni tutti i file SVG grezzi che puoi aggiungere direttamente in HTML.

L'unico problema è questo SVG grezzi richiedono più modifiche per cambiare i colori, mentre la rotta JS / CSS ti dà il controllo sui colori tramite il codice.

Basta aggiungere il geomicons.min.js script nella tua intestazione e passare il Dati-icon attributo in elementi HTML. Queste icone verranno incorporate automaticamente che potrai quindi manipolare usando le classi CSS.

Un'altra cosa che mi piace davvero di Geomicons è il supporto per Node. Ecco uno snippet di esempio dal repository GitHub:

var geomicons = require ('geomicons-open'); var pathData = geomicons.paths.heart; // Restituisce il valore dell'attributo d del percorso var svgString = geomicons.toString ('heart'); // Restituisce una stringa SVG

Se non hai familiarità con Node, probabilmente non avrai mai bisogno di usare nessuno dei frammenti del Nodo. Lo stesso vale per la versione React.js di queste icone.

Avere ancora il supporto per i principali framework è un grosso problema. È più la prova che i Geomicons sono destinati a supporta qualsiasi tipo di sito web concentrandoti prima sulle prestazioni.

Per dare a queste icone una corsa di prova, puoi copiare una copia tramite npm o scaricarla direttamente tramite GitHub.

C'è anche un iconset di contorno chiamato Geomicons Wired che potresti voler testare.

Ad ogni modo, questo è un iconset geniale per i web designer minimalisti. Una scelta perfetta per ottimizzare il tuo sito con bellissime icone riducendo al contempo i tempi di caricamento totali della pagina.