SVG je sjajan način za unošenje vektorskih slika u tijek dizajna i razvoja. Ali prikupljanje i organiziranje SVG datoteka na računalu može biti izazov.
Kako Iconset može pomoći da otkloni bol i učini nas produktivnijima?
- Što je SVG?
- Što je Iconset?
- Što ćemo naučiti?
- 1. dio: Početak rada s Iconsetom
- Dio 2: Dodavanje ikona u Iconset
- Dio 3: Korištenje Iconseta s dizajnerskim softverom poput Figme
- Dio 4: Korištenje Iconseta u razvoju kao kod React-a
- Dio 5: Sinkronizacija skupa ikona na više računala s Dropboxom
Što je SVG?
SVG je format slikovne datoteke star gotovo 20 godina. I dok postoji već neko vrijeme, tek je nedavno dobio zamah u razvojnoj zajednici.
SVG je izvrstan iz više razloga. Prije svega, to je vektorski format, što znači da se mjeri onoliko veliko ili malo koliko želite.
Ali fleksibilan je i u tome što SVG možete koristiti izravno u svom razvojnom projektu s tipično malom veličinom datoteke i beskonačnom razmjerom. Možete ga čak i animirati!
Ali pokušaj prikupljanja i organiziranja gomile datoteka može biti izazov. Kako ih imenujete? Imate li računalo koje ih može lako pregledati? Što je s pretraživanjem?
Što je Iconset?
Iconset je besplatni alat za više platformi koji vam omogućuje prikupljanje i upravljanje svim SVG datotekama na jednom mjestu.
Volite se brzo kretati između Font Awesome i heroicons, ali ne želite nastaviti mijenjati knjižnice? Možete koristiti Iconset za brzo pretraživanje i povucite ga točno u svoj projekt.
Ako ga planirate koristiti za React projekt, možete čak kopirati datoteku kao JSX i izbaciti je izravno u svoj projekt!
Što ćemo naučiti?
Proći ćemo kroz nekoliko različitih scenarija koji će nam pokazati kako je Iconset koristan.
Također ćemo proći kroz način na koji možete lako upravljati Iconsetom između različitih računala ili okruženja kako biste mogli imati istu izvrsnu biblioteku bilo gdje da radite.
1. dio: Početak rada s Iconsetom
Da biste započeli, morat ćete prvo instalirati Iconset lokalno. To bi trebao biti sličan postupak instalacije kao i bilo koja druga aplikacija.
Jednom kad bude spreman i dostupan lokalno, trebali biste ga moći otvoriti i vidjeti korisničko sučelje bez ikona, što se očekuje, jer nema isporučenih ikona.
Dio 2: Dodavanje ikona u Iconset
Dodavanje ikona u Iconset lako je poput uvlačenja, ali tijekom postupka imate nekoliko mogućnosti.
Za početak, preuzmimo besplatni heroicons set ikona.
Preuzmi na: //heroicons.com/.
Na web mjestu heroicons trebali biste vidjeti veliki gumb Preuzmi sve koji će preuzeti zip datoteku koja uključuje sve datoteke.
Ako prijeđete na optimiziranu mapu, vidjet ćete da postoje dvije različite verzije: puna i kontura.
Sada da biste ih prenijeli u Iconset, odaberite svaku mapu pojedinačno i povucite je točno u Iconset.
Kad stignete, imate nekoliko mogućnosti.
- Set: Budući da je ovo naš prvi set, automatski ćete stvoriti novi. Da ste imali postojeće skupove, mogli biste ih uvoziti.
- Naziv skupa: Ovdje možemo imenovati skup nečim što ćemo pamtiti. Zbog toga preporučujem da ga imenujete "heroicons - Outline".
- Opcije uvoza: ovo su neobavezne postavke, ali obično odabirem opciju optimizacije i čišćenja kako bih bio siguran da su ikone odmah spremne za rad.
A nakon što kliknete Uvezi, učinit će to i sada ćete imati prvi set ikona u Iconsetu!
Možete ići naprijed i učiniti isto sa solidnim direktorijumom, tako da ćemo sada imati spremna dva seta.
U ovom trenutku možete pomoću Iconseta pretraživati svoje ikone i vidjeti sve datoteke koje su trenutno dostupne u vašoj kolekciji.
Dio 3: Korištenje Iconseta s dizajnerskim softverom poput Figme
Sjajna stvar kod Iconseta je kako ga je jednostavno koristiti s dizajnerskim softverom poput Figme.
Ako bih želio dodati ikonu omotnice na svoje web mjesto kako bi me ljudi mogli kontaktirati, mogao bih potražiti ikonu pošte i jednostavno je povući na svoje platno:
Tada ga mogu tretirati kao bilo koji drugi element vektorskog dizajna i odmah ga koristiti u svom projektu.
Dio 4: Korištenje Iconseta u razvoju kao kod React-a
Još je jedna cool stvar koliko je lako koristiti u projektu poput React-a.
Iz kutije dobivate nekoliko različitih načina na koje možete kopirati datoteku i koristiti je u razvoju, poput kopiranja kao JSX.
Ako smatram da bi moj Next.js Sass Starter mogao koristiti neke ikone na stranici, mogu desnom tipkom miša kliknuti bilo koju ikonu koju želim i pod Copy As select JSX mogu je zalijepiti izravno u svoj projekt!
Iako će vam trebati malo stylinga kad ga stavite kao i bilo koju drugu sliku ili ikonu, odmah je spreman za rad.
Dio 5: Sinkronizacija skupa ikona na više računala s Dropboxom
Uz Iconset imate mogućnost prebacivanja između različitih knjižnica. Ali što je najvažnije, možete postaviti i lokaciju svoje knjižnice.
Kad Iconset kreira vašu biblioteku, na vašem računalu pohranjuje sve kao datoteke i bazu podataka.
A unutar korisničkog sučelja Iconset možemo i premještati i mijenjati lokaciju koju koristimo.
Ako prvi put postavljate Iconset, možete započeti klikom na Premjesti, a zatim odabirom mjesta na kojem ga želite sinkronizirati.
A nakon što kliknete Premjesti, premjestit će ga u taj direktorij, poput mape na Dropboxu, i sinkronizirati s oblakom kao i bilo koja druga mapa i datoteka.
Ako već imate zajedničku knjižnicu Iconset ili ako ovo postavljate na novom računalu, možete upotrijebiti opciju Prebaci i odabrati tu opciju izravno iz Dropboxa.
A nakon što pritisnete Switch, sada ćete učitati svoju zajedničku knjižnicu i biti spremni za produktivnost.
Što još možeš učiniti?
Objavite i podijelite skupove ikona
Još jedna zgodna značajka je da možete izvoziti i dijeliti skupove. Ako ste potrošili puno vremena na kolekciju i želite je podijeliti s drugima, izvezite je, objavite i podijelite sa zajednicom!
Više organizacije
Iconset također podržava značajke poput mapa i favorita. To još više olakšava grupiranje i prikupljanje ikona, ali ima smisla da budete produktivni.
Podržava i označavanje, što olakšava pretraživanje.
- ? Slijedite me na Twitteru
- ? Pretplatite se na moj Youtube
- Up Prijavite se za moj bilten
- ? Sponzorirajte me