Super što si spomenuo Icomoon! Baš zbog toga što mi je taj servis oduzimao mnogo vremena u radu, napravio sam ovo.
Problem je bio u tome što je previše dugo trajalo dodavanje novih ikonica u font, eksportovanje fonta i integracija sa SASS-om u projektima na kojima radim. Skratio sam postupak sa ~30-40 min na par sekundi i dobio alatku koja mi omogućuje sledeće:
- Razdvojeni SASS/CSS: jedan sa samim webfontom i drugi samo sa znakovima. Na ovaj način mogu lakše da organizujem CSS za velike projekte i da radim @extend kroz SCSS. Ima mnogo slučajeva kada mi je bitnije bilo da ikonice za neke objekte rešim kroz CSS nego da u HTML-u ukucavam <i class="icon icon-bla...
- Drastično je brže - dovoljno je samo da ubaciš SVG u predviđeni folder , pokreneš gulp proces i ceo font, stilovi i dokumentacija će biti napravljeni za par sekundi. Napravio sam i watch task, tako da ako pokreneš 'gulp watch' i dodaš novu ikonicu ili izbaciš staru, odmah ćeš imati izrenderovan nov font i stilove.
- Lako se integriše sa ostalim gulp procesima. Kada radiš na velikim projektima, automatizacija ovakvih zadataka je najbitnija. Šta god da menjaš, u idealnom slučaju želiš da se sve odradi automatski i bez tvoje intervencije.
- Bolje su kompresovani fajlovi za fontove nego oni koje radi Icomoon. Za velike kolekcije ikonica sam video i po 50% manje fajlove. Umesto da napravim font u icomoonu, pa onda rekompresujem u font squirrel-u da dođe na normalnu veličinu, ovaj proces to odradi automatski.
- Ima file revving integrisan u samim imenima fajlova. Bitna stavka ako često menjaš font, a želiš da posetioci uvek imaju najnoviju verziju učitanu.
Kad uđeš malo u materiju sa nodeJS-om, npm paketima i gulpom, skapiraš koliko dobro može da se odradi ovakva automatizacija.
sve gotovo za 2s
i izrenderovan ceo styleguide
Sledeći korak je da završim ceo frontend framework koji će raditi na ovaj način. Ovo je samo jedan "iščupan" modul
Biće toga još.
