Geomicons - unikaalne käsitsi kodeeritud SVG Iconset

Veebi ikoonid on kiiresti muutumas tänapäeva veebidisaini normiks. Nad on massiivsed veebidisainerite varad ikoone saab kohandada CSS-i kaudu suurust ilma kvaliteedikadu muutmata.

Kuid mõned ikoonipakendid võivad tunduda paisutatud ja väiksematele saitidele liiga suured. Seal paistab Geomicons.

See on SVG-ga töötav kohandatud käsitsi kodeeritud ikoonipakett. Ikoonid saate kinnitada JS-skriptide kaudu või otse lehele SVG-failidena. Mõlemal juhul on nad ilusad vektorid ja super lihtne.

Geomiconi peamisel lehel on kõigi ikoonide täielik demo. Nad on üsna lihtsad ja järgivad traditsioonilist ühevärvilist tasapinnalist disaini, mida me kõik tunneme.

Kuid nende seadistusinfo on kindlasti demo lehel puudulik. Kui sa tahad õppida, kuidas seda seadistada, peate juhiste saamiseks külastama GitHub repot.

Vaikimisi see raamatukogu eeldab, et te töötate CSS / JS-iga et need ikoonid oleksid lehekülgede elementidesse otse paigutatud. Kuid kui laadite GitHubist ikoonid alla, saad kõik toores SVG-failid, mida saab otse HTML-i lisada.

Ainult hädas on see toores SVG-d vajavad rohkem redigeerimist värvide muutmiseks, samas kui JS / CSS marsruut annab teile koodi abil kontrolli värvide üle.

Lihtsalt lisage geomicons.min.js skripti oma päisesse ja edasi andmete ikoon atribuut HTML-elementidesse. Need sisaldavad automaatselt ikoone, mida saate seejärel CSS-klassi kasutades manipuleerida.

Veel üks asi, mida ma Geomiconi kohta meeldib, on Node'i toetus. Siin on GitHub repo näidislõik:

var geomicons = vaja (geomicons-open); var pathData = geomicons.paths.heart; // Tagastab tee d atribuudi väärtuse var svgString = geomicons.toString ('süda'); // Tagastab SVG stringi

Kui te ei ole Node-ga tuttav, ei pea te tõenäoliselt kunagi kasutama ükskõik millist sõlme fragmenti. Sama kehtib ka nende ikoonide React.js versiooni kohta.

Suurte raamistike toetamine on siiski suur asi. See on rohkem tõend, et Geomicons on mõeldud toetada mis tahes tüüpi veebisaite keskendudes esmalt jõudlusele.

Nendele ikoonidele testi käivitamiseks saate kopeerida npm-i või laadida need otse GitHubi kaudu.

Seal on ka kontuurikoodid, mida nimetatakse Geomicons Wired'iks, mida võiksite ka testida.

Mõlemal juhul on see a geniaalne ikoonikett minimalistlike veebidisainerite jaoks. Ideaalne valik teie saidi optimeerimiseks ilusate ikoonidega, vähendades samal ajal lehekülgede koguarvu.