Geomicons - unikátny ručne kódovaný SVG Iconset

Webové ikony sa rýchlo stávajú normou pre moderný dizajn webu. Sú to obrovské prostriedky pre webových dizajnérov ako tieto ikony je možné prispôsobiť pomocou CSS a zmenil ich veľkosť bez straty kvality.

Niektoré balíky s ikonami sa však môžu cítiť nafúknuté a príliš veľké pre menšie miesta. To je miesto, kde Geomicons skutočne žiari.

Toto je vlastný ručne kódovaný balík ikon, ktorý beží na SVG. Ikony môžete vložiť pomocou JS skriptov alebo ako priame súbory SVG do vašej stránky. Či tak alebo onak, sú to nádherné vektory a super ľahko restyle.

Na hlavnej stránke Geomicons nájdete plnohodnotné ukážky všetkých ikon. Sú veľmi jednoduché a sledujú tradičné jednobarevné štýly s plochým dizajnom, s ktorými sme všetci oboznámení.

Ale ich informácie o nastavení určite chýbajú na demo stránke. Ak sa chcete dozvedieť, ako nastaviť toto nastavenie, musíte navštíviť repo spoločnosti GitHub pre pokyny.

Toto nastavenie je predvolené knižnica predpokladá, že pracujete s CSS / JS aby tieto ikony boli vložené priamo do prvkov stránky. Napriek tomu, keď si stiahnete ikony z GitHub, dostanete všetky surové SVG súbory, ktoré môžete pridať priamo do HTML.

Iba problém je to surové SVG vyžadujú viac úprav zmeniť farby, zatiaľ čo cesta JS / CSS vám umožňuje riadiť farby pomocou kódu.

Jednoducho pridajte geomicons.min.js skript do hlavičky a prejdite Data-icon atribút do elementov HTML. Tieto budú automaticky vkladať ikony, ktoré môžete potom manipulovať pomocou tried CSS.

Ďalšia vec, ktorá sa mi páči Geomicons, je podpora pre uzol. Tu je ukážkový úryvok z repo GitHub:

var geomicons = vyžadujú ('geomicons-open'); var pathData = geomicons.paths.heart; // Vráti hodnotu d atribútu dĺžky cesty var svgString = geomicons.toString ('srdce'); // Vracia reťazec SVG

Ak nie ste oboznámení s uzlom, pravdepodobne nebudete musieť používať žiadne úryvky uzlov. To isté platí pre verziu týchto ikon React.js.

Stále má podporu pre hlavné rámce je veľký problém. Je to viac dôkazu, že Geomicons sú určené podporovať akýkoľvek typ webových stránok tým, že sa najprv zameria na výkon.

Ak chcete dať týmto ikonám skúšobnú prevádzku, môžete vytiahnuť kópiu cez npm alebo ich stiahnuť priamo cez GitHub.

K dispozícii je tiež ikona osnovy s názvom Geomicons Wired, ktorú by ste si mohli tiež vyskúšať.

Či tak alebo onak, je to a brilantná ikona pre minimalistické webové dizajnérmi. Perfektná voľba pre optimalizáciu vášho webu s krásnymi ikonami a súčasne znižuje celkový čas načítania stránky.