Geomicons - Un set di icone SVG con codice mano unico

Le icone Web stanno rapidamente diventando la norma per il web design moderno. Sono enormi risorse per i web designer in quanto queste icone possono essere personalizzate tramite CSS e ridimensionate 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.

Si tratta di 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 certamente carenti nella pagina demo. Se vuoi sapere come impostarlo devi visitare il repository GitHub per istruzioni.

Per impostazione predefinita, questa libreria presuppone che tu stia lavorando con CSS / JS per avere queste icone incorporate direttamente negli elementi di pagina. Tuttavia, quando scarichi le icone da GitHub ottieni tutti i file SVG grezzi che puoi aggiungere direttamente in HTML.

L'unico problema è che gli 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 lo script geomicons.min.js nell'intestazione e passare l'attributo icona dati 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ù evidente che i Geomicons sono pensati per supportare qualsiasi tipo di sito web concentrandosi innanzitutto 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 set di icone 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.