Geomicons - En unik håndkodet SVG Iconset

Websymboler er raskt blitt normen for moderne webdesign. De er enorme eiendeler til webdesignere som disse ikoner kan tilpasses gjennom CSS og endret uten noe kvalitetsfall.

Men noen ikonpakker kan føles oppblåst og for store til mindre steder. Det er der Geomicons virkelig skinner.

Dette er en egendefinert håndkodet ikonpakke som kjører på SVG. Du kan legge inn ikonene gjennom JS-skript, eller som direkte SVG-filer til siden din. Uansett er de vakre vektorer og super lett å restylle.

Den viktigste Geomicons-siden inneholder en full demonstrasjon av alle ikonene. De er ganske enkle og følger den tradisjonelle enfargede flate design stilen vi alle er kjent med.

Men deres oppsettinformasjon mangler absolutt på demo siden. Hvis du vil lære å sette opp dette, må du besøke GitHub repo for instruksjoner.

Som standard, dette biblioteket forutsetter at du jobber med CSS / JS å ha disse ikonene innebygd direkte til sideelementer. Men når du laster ned ikonene fra GitHub, får du alle de ruwe SVG-filene som du kan legge til direkte i HTML.

Bare problemer er det Rå SVGer krever mer redigering for å endre farger, mens JS / CSS-ruten gir deg kontroll over farger via koden.

Bare legg til geomicons.min.js Skript inn i overskriften og passere data-icon Tilordne til HTML-elementer. Disse vil automatisk innebygge ikoner som du deretter kan manipulere ved hjelp av CSS-klasser.

En annen ting jeg virkelig liker om Geomicons er støtten til Node. Her er en prøvebit fra GitHub repo:

var geomicons = krever ('geomicons-open'); var pathData = geomicons.paths.heart; // Returnerer stien d-attributtverdien var svgString = geomicons.toString ('heart'); // Returnerer en SVG-streng

Hvis du ikke er kjent med Node, vil du sannsynligvis aldri trenge å bruke noen av knutepunktene. Det samme gjelder for React.js-versjonen av disse ikonene.

Fortsatt å ha støtte for store rammer er en stor avtale. Det er mer bevis på at Geomicons er ment å støtte hvilken som helst type nettside ved å fokusere på ytelse først.

For å gi disse ikonene en testkjøring kan du trekke en kopi gjennom npm eller laste dem direkte via GitHub.

Det er også en oversikt iconset kalt Geomicons Wired som du kanskje vil teste også.

Uansett, dette er en strålende ikonsett for minimalistiske webdesignere. Et perfekt valg for å optimalisere nettstedet ditt med vakre ikoner, samtidig som du reduserer de totale sidelastningstider.