Geomicons - En unik handkodad SVG Iconset

Websymboler blir snabbt norm för modern webbdesign. De är enorma tillgångar till webbdesigners som dessa ikoner kan anpassas via CSS och ändra storlek utan någon kvalitetsförlust.

Men vissa ikonpaket kan kännas uppblåsta och för stora för mindre platser. Det är där Geomicons verkligen lyser.

Det här är en anpassat handkodat ikonpaket som körs på SVG. Du kan bädda in ikonerna via JS-skript, eller som direkta SVG-filer till din sida. Hur som helst, de är vackra vektorer och super lätt att återställa.

Den viktigaste Geomicons-sidan innehåller en fullständig demonstration av alla ikoner. De är ganska enkla och följer den traditionella enfärgade plattdesignstil som vi alla är bekanta med.

Men deras installationsinformation saknar verkligen demo-sidan. Om du vill lära dig hur du ställer upp det måste du besöka GitHub repo för instruktioner.

Som standard är detta biblioteket förutsätter att du arbetar med CSS / JS att ha dessa ikoner inbäddade direkt till sidelementen. Men när du laddar ner ikonerna från GitHub får du alla de svåra SVG-filerna som du kan lägga till direkt i HTML.

Bara problem är det råa SVG kräver mer redigering för att ändra färger, medan JS / CSS-rutten ger dig kontroll över färger via koden.

Lägg bara till geomicons.min.js skript i din rubrik och passera uppgifter-icon ange i HTML-element. Dessa kommer automatiskt inbädda ikoner som du sedan kan manipulera med hjälp av CSS-klasser.

En annan sak som jag verkligen gillar om Geomicons är stödet till Node. Här är ett provbit från GitHub repo:

var geomicons = kräver ("geomicons-open"); var pathData = geomicons.paths.heart; // Returnerar sökvägens attributvärde var svgString = geomicons.toString ('heart'); // Returnerar en SVG-sträng

Om du inte är bekant med Node så behöver du förmodligen aldrig använda Node-fragmenten. Samma sak gäller React.js-versionen av dessa ikoner.

Att ha stöd för stora ramar är en stor sak. Det är mer bevis på att Geomicons är avsedda att stödja någon typ av webbplats genom att fokusera på prestanda först.

För att ge dessa ikoner en testkörning kan du dra en kopia genom npm eller ladda dem direkt via GitHub.

Det finns också en skissikon som heter Geomicons Wired som du kanske vill testa också.

Hur som helst, det här är en lysande ikoner för minimalistiska webbdesigners. Ett perfekt val för att optimera din webbplats med vackra ikoner samtidigt som du minskar totala sidbelastningstider.