Geomicons - Een unieke, met de hand gecodeerde SVG-pictogrammenset

Web iconsets worden snel de norm voor modern webdesign. Ze zijn enorme troeven voor webontwerpers als deze pictogrammen kunnen worden aangepast via CSS en verkleind zonder kwaliteitsverlies.

Maar sommige pictogrampakketten kunnen opgeblazen en te groot zijn voor kleinere sites. Dat is waar Geomicons echt schittert.

Dit is een aangepast handgecodeerd pictogrampakket dat op SVG wordt uitgevoerd. U kunt de pictogrammen insluiten via JS-scripts of als directe SVG-bestanden op uw pagina. Hoe dan ook, het zijn prachtige vectoren en super gemakkelijk om te restylen.

De belangrijkste Geomicons-pagina bevat een volledige demo van alle pictogrammen. Ze zijn vrij eenvoudig en volgen de traditionele platte ontwerpstijl met één kleur waar we allemaal bekend mee zijn.

Maar hun setup-info ontbreekt zeker op de demopagina. Als je wilt leren hoe je dit moet instellen, moet je de GitHub-repo bezoeken voor instructies.

Standaard is dit bibliotheek gaat ervan uit dat u met CSS / JS werkt om deze pictogrammen rechtstreeks in pagina-elementen te laten insluiten. Maar als je de iconen van GitHub download krijg je alle onbewerkte SVG-bestanden die je direct in HTML kunt toevoegen.

Enige probleem is dat onbewerkte SVG's vereisen meer bewerking om van kleur te veranderen, terwijl de JS / CSS-route u via de code de controle over kleuren geeft.

Voeg gewoon de geomicons.min.js script in je header en sla de data-icon attribuut in HTML-elementen. Deze zullen automatisch pictogrammen insluiten die u vervolgens kunt manipuleren met behulp van CSS-klassen.

Een ander ding dat ik erg leuk vind aan Geomicons is de ondersteuning voor Node. Hier is een voorbeeldfragment uit de GitHub-repo:

var geomicons = require ('geomicons-open'); var pathData = geomicons.paths.heart; // Retourneert het attribuutwaarde d van d pad var svgString = geomicons.toString ('heart'); // Retourneert een SVG-tekenreeks

Als u niet bekend bent met Node, zult u waarschijnlijk nooit een van de knooppuntfragmenten hoeven te gebruiken. Hetzelfde geldt voor de React.js-versie van deze pictogrammen.

Het hebben van steun voor belangrijke kaders is een groot probleem. Het is meer het bewijs dat Geomicons bedoeld is ondersteuning voor elk type website door eerst op prestaties te focussen.

Om deze pictogrammen een testrun te geven, kun je een kopie door npm halen of ze rechtstreeks downloaden via GitHub.

Er is ook een overzichtspictogram, genaamd Geomicons Wired, dat je misschien ook wilt testen.

Hoe dan ook, dit is een briljante iconset voor minimalistische webdesigners. Een perfecte keuze voor het optimaliseren van uw site met prachtige pictogrammen, terwijl u de totale laadtijd van de pagina's verlaagt.