Geomicons - unikalus rankiniu kodu SVG Iconset

Web iconsets greitai tampa modernios interneto dizaino norma. Jie yra didžiuliai turtai žiniatinklio dizaineriams piktogramas galima pritaikyti per CSS ir keičiamos be kokybės nuostolių.

Tačiau kai kurios piktogramų pakuotės gali jaustis ištinusios ir per mažos mažesnėms svetainėms. Štai kur Geomicons tikrai šviečia.

Tai yra pasirinktinis rankiniu būdu užkoduotas piktogramų paketas, veikiantis SVG. Jūs galite įdėti piktogramas per JS scenarijus arba kaip tiesioginius SVG failus į savo puslapį. Bet kokiu atveju, jie yra gražūs vektoriai ir labai lengva atkurti.

Pagrindiniame „Geomicons“ puslapyje yra visas visų piktogramų demonstravimas. Jie yra gana paprasti ir laikosi tradicinio vieno spalvos plokščio dizaino stiliaus.

Tačiau jų nustatymo informacija demo puslapyje tikrai trūksta. Jei norite sužinoti, kaip tai nustatyti, jums reikia apsilankyti „GitHub“ repo.

Pagal numatytuosius nustatymus tai bibliotekoje daroma prielaida, kad dirbate su CSS / JS kad šios piktogramos būtų įdėtos tiesiai į puslapio elementus. Tačiau, kai atsisiunčiate piktogramas iš „GitHub“, gausite visus neapdorotus SVG failus, kuriuos galite pridėti tiesiogiai į HTML.

Tik tai yra problema žaliavos SVG reikalauja daugiau redagavimo keisti spalvas, o JS / CSS maršrutas leidžia valdyti spalvas per kodą.

Tiesiog pridėkite geomicons.min.js scenarijų į antraštę ir perduoti duomenų piktograma atributas į HTML elementus. Tai bus automatiškai įterpti piktogramas, kurias galite valdyti naudojant CSS klases.

Kitas dalykas, kurį man labai patinka, yra „Node“ palaikymas. Štai pavyzdinis fragmentas iš „GitHub“ repo:

var geomicons = reikalauti („geomicons-open“); var pathData = geomicons.paths.heart; // Grąžina kelio d atributo vertę var svgString = geomicons.toString („širdis“); // Grąžina SVG eilutę

Jei nesate susipažinę su „Node“, tada jums tikriausiai niekada nereikės naudoti nė vieno „Node“ fragmento. Tas pats pasakytina apie šių piktogramų React.js versiją.

Vis dar palaikyti pagrindines sistemas yra didelis dalykas. Tai daugiau įrodymų, kad „Geomicons“ yra skirtas palaikyti bet kokio tipo svetaines pirmiausia sutelkdami dėmesį į našumą.

Jei norite, kad šios piktogramos būtų išbandytos, galite nukopijuoti kopiją per npm arba atsisiųsti juos tiesiogiai per „GitHub“.

Taip pat yra kontūrinės piktogramos, vadinamos „Geomicons Wired“, kurias jūs taip pat norėtumėte išbandyti.

Bet kuriuo atveju tai yra a puiki piktograma minimalistiniams web dizaineriams. Puikus pasirinkimas optimizuoti savo svetainę su gražiais piktogramomis, tuo pačiu sumažinant viso puslapio įkėlimo laiką.