Geomicons - ainutlaatuinen käsin koodattu SVG Iconset
Web-kuvakkeet ovat nopeasti muuttumassa nykyaikaisen web-suunnittelun normaaliksi. He ovat massiivisia resursseja web-suunnittelijoille kuvakkeita voidaan mukauttaa CSS: n avulla ja muutetaan kokoa ilman laatuhäviötä.
Mutta jotkut kuvakkeet saattavat tuntea paisuneena ja liian suuriksi pienemmille sivustoille. Siellä Geomicons todella loistaa.
Tämä on mukautettu käsin koodattu kuvakepaketti, joka toimii SVG: llä. Voit upottaa kuvakkeet JS-komentosarjojen kautta tai suoraan SVG-tiedostoina sivullesi. Joko niin, he ovat kauniita vektoreita ja erittäin helppokäyttöisiä.
Geomiconsin tärkeimmillä sivuilla on täysi demo kaikista kuvakkeista. He ovat melko yksinkertaisia ja noudattavat perinteistä yhdenväristä tasaista design-tyyliä, jota me kaikki tunnemme.
Mutta niiden asetustiedot puuttuvat varmasti esittelysivulta. Jos haluat oppia määrittämään tämän, sinun täytyy käydä GitHub-repossa ohjeiden saamiseksi.
Oletuksena tämä on kirjasto olettaa, että työskentelet CSS / JS: n kanssa että nämä kuvakkeet upotetaan suoraan sivuelementteihin. Mutta kun lataat kuvakkeet GitHubista, saat kaikki raaka SVG-tiedostot, jotka voit lisätä suoraan HTML: ään.
Ainoa ongelma on se raaka-SVG: t vaativat enemmän muokkausta värien vaihtaminen, kun taas JS / CSS-reitillä voit hallita värejä koodin kautta.
Lisää vain geomicons.min.js skripti otsikkoon ja siirtää data-kuvake määrite HTML-elementteihin. Nämä upottavat kuvakkeita, joita voit sitten käsitellä CSS-luokkien avulla.
Toinen asia, jota pidän Geomiconsista, on Node-tuen tuki. Tässä on otospätkä GitHub-reposta:
var geomicons = vaadi ('geomicons-open'); var pathData = geomicons.paths.heart; // Palauttaa polun d-määritteen arvon var svgString = geomicons.toString ('sydän'); // Palauttaa SVG-merkkijonon Jos et tunne solmua, sinun ei todennäköisesti tarvitse koskaan käyttää mitään solmunpätkiä. Sama pätee näiden kuvakkeiden React.js-versioon.
Vielä suurten puitteiden tukeminen on suuri asia. Se on enemmän todiste siitä, että Geomicons on tarkoitettu tukea minkä tahansa tyyppisiä verkkosivustoja keskittymällä ensin suorituskykyyn.
Voit antaa näille kuvakkeille koeajon vetämällä kopion npm: n kautta tai lataamalla ne suoraan GitHubin kautta.
Mukana on myös ääriviivakuvakkeet, joita kutsutaan Geomicons Wirediksi, joita voit myös testata.
Joka tapauksessa tämä on a loistavat kuvakkeet minimalistisille web-suunnittelijoille. Täydellinen valinta sivustosi optimointiin kauniilla kuvakkeilla samalla kun sivun latausajat laskevat.
