Geomicons - Egyedi, kézzel kódolt SVG Iconset
A webes ikonok gyorsan váltak a modern webdesign normájává. Ezek hatalmas eszközök a webes tervezők számára, mint ezek az ikonok testreszabhatók a CSS-en keresztül átméretezés nélkül, minőségi veszteség nélkül.
De egyes ikoncsomagok megduzzadhatnak és túl nagyok lehetnek a kisebb oldalak számára. Ekkor ragyog a Geomicons.
Ez egy az SVG-n futó egyedi kézzel kódolt ikoncsomag. Az ikonok beágyazhatók a JS szkriptek segítségével, vagy közvetlen SVG fájlokként az oldalára. Akárhogy is, ezek gyönyörű vektorok és szuper könnyű újra.
A fő Geomicons oldal az összes ikon teljes demóját tartalmazza. Elég egyszerűek és követik a hagyományos, egyszínű, lapos kivitelű stílusokat, amiket mindannyian ismerünk.
De a telepítési információjuk minden bizonnyal hiányzik a bemutató oldalon. Ha megtanulod, hogyan állítsd be ezt, meg kell látogatnod a GitHub repo-t az utasításokért.
Alapértelmezés szerint ez a könyvtár feltételezi, hogy a CSS / JS-rel dolgozik hogy ezek az ikonok közvetlenül beilleszkedjenek az oldalelemekbe. Ha azonban letölti az ikonokat a GitHub-ból, akkor megkapja az összes nyers SVG fájlt, amelyet közvetlenül hozzáadhat a HTML-hez.
Csak baj van A nyers SVG-k több szerkesztést igényelnek a színek megváltoztatása, míg a JS / CSS útvonal a színek vezérlését teszi lehetővé a kódon keresztül.
Egyszerűen add hozzá a geomicons.min.js parancsfájl a fejlécbe és átmegy a data-ikon attribútum HTML elemekbe. Ezek automatikusan beágyazzák az ikonokat, amelyeket a CSS osztályok segítségével manipulálhat.
Egy másik dolog, amit nagyon szeretem a Geomicons-al, a Node támogatása. Íme egy minta részlet a GitHub repóból:
var geomicons = szükséges („geomicons-open”); var pathData = geomicons.paths.heart; // Visszaadja az útvonal d attribútum értékét var svgString = geomicons.toString ('szív'); // Egy SVG karakterláncot ad vissza Ha nem ismeri a Node-ot, akkor valószínűleg soha nem kell használnia a Node csomópontokat. Ugyanez vonatkozik ezeknek az ikonoknak a React.js verziójára is.
A nagy keretek támogatása még mindig nagy dolog. Ez több bizonyíték arra, hogy a Geomiconoknak szándékuk van támogat bármilyen típusú webhelyet először a teljesítményre koncentrálva.
Ahhoz, hogy ezek az ikonok teszt tesztet adhassanak, npm-en keresztül húzhat egy példányt, vagy közvetlenül a GitHub-on keresztül töltheti le őket.
Van még egy vázlatos ikon, amit Geomicons Wired-nek hívnak, amit tesztelni is akar.
Akárhogy is, ez egy briliáns ikonok a minimalista webes tervezők számára. Tökéletes választás a webhely gyönyörű ikonokkal történő optimalizálásához, miközben csökkenti az oldalak teljes betöltési idejét.
