Kaip organizuoti ir sinchronizuoti SVG failus su „Iconset“

SVG yra puikus būdas įtraukti vektorinius vaizdus į projektavimo ir kūrimo darbo eigą. Tačiau rinkti ir tvarkyti SVG failus kompiuteryje gali būti sudėtinga.

Kaip „Iconset“ gali padėti pašalinti skausmą ir tapti produktyvesniais?

  • Kas yra SVG?
  • Kas yra „Iconset“?
  • Ko mes mokysimės?
  • 1 dalis: „Iconset“ pradžia
  • 2 dalis. Piktogramų pridėjimas prie piktogramų rinkinio
  • 3 dalis. „Iconset“ naudojimas su projektavimo programine įranga, pvz., „Figma“
  • 4 dalis: „Iconset“ naudojimas kuriant, kaip ir „React“
  • 5 dalis. Piktogramų rinkinio sinchronizavimas keliuose kompiuteriuose su „Dropbox“

Kas yra SVG?

SVG yra beveik 20 metų senumo vaizdo failo formatas. Ir nors jis egzistuoja kurį laiką, jis tik neseniai įgavo pagreitį vystymosi bendruomenėje.

SVG yra puikus dėl daugelio priežasčių. Visų pirma, tai yra vektorinis formatas, reiškiantis, kad mastelis yra toks didelis ar mažas, kiek norite.

Tačiau jis taip pat lankstus tuo, kad galite naudoti SVG tiesiai savo kūrimo projekte su paprastai mažu failo dydžiu ir begaline skale. Jūs netgi galite tai animuoti!

Tačiau bandyti surinkti ir sutvarkyti daugybę failų gali būti nelengva. Kaip juos pavadini? Ar turite kompiuterį, kuris gali lengvai juos peržiūrėti? O kaip su paieška?

Kas yra „Iconset“?

„Iconset“ yra nemokamas daugiaplatformis įrankis, leidžiantis vienoje vietoje rinkti ir tvarkyti visus savo SVG failus.

Mėgstate greitai judėti tarp „Font Awesome“ ir „heroicons“, bet nenorite toliau keisti bibliotekų? Galite naudoti „Iconset“, kad galėtumėte greitai ieškoti ir vilkti tiesiai į savo projektą.

Jei planuojate jį naudoti „React“ projektui, galite net nukopijuoti failą kaip JSX ir perkelti jį tiesiai į savo projektą!

Ko mes mokysimės?

Apžvelgsime kelis skirtingus scenarijus, kurie parodys mums, kaip „Iconset“ yra naudinga.

Mes taip pat apžvelgsime, kaip galite lengvai valdyti „Iconset“ skirtinguose kompiuteriuose ar aplinkose, kad galėtumėte turėti tą pačią puikią biblioteką bet kur dirbdami.

1 dalis: „Iconset“ pradžia

Norėdami pradėti, pirmiausia turėsite įdiegti „Iconset“ vietoje. Tai turėtų būti panašus diegimo procesas, kaip ir bet kuri kita programa.

Kai jis bus paruoštas ir pasiekiamas vietoje, turėtumėte galėti jį atidaryti ir pamatyti vartotojo sąsają be jokių piktogramų, kurios tikimasi, nes joje nėra jokių piktogramų iš dėžutės.

2 dalis. Piktogramų pridėjimas prie piktogramų rinkinio

Piktogramas pridėti prie „Iconset“ yra taip pat lengva, kaip vilkti, bet proceso metu turite keletą galimybių.

Norėdami pradėti, atsisiųskite nemokamus piktogramų rinkinio herojus.

Atsisiųsti: //heroicons.com/.

„Heroicons“ svetainėje turėtumėte pamatyti didelį mygtuką „Atsisiųsti viską“, kuris atsisiųs ZIP failą su visais failais.

Jei nueisite į optimizuotą aplanką, pamatysite, kad yra dvi skirtingos versijos: kietoji ir kontūro.

Dabar, jei norite juos įtraukti į „Iconset“, pasirinkite kiekvieną aplanką atskirai ir vilkite jį tiesiai į „Iconset“.

Nuvykę ten turite keletą galimybių.

  • Rinkinys: kadangi tai yra pirmasis mūsų rinkinys, jūs automatiškai sukursite naują. Jei turėtumėte esamų rinkinių, galėtumėte importuoti į tuos rinkinius.
  • Rinkinio pavadinimas: Čia galime rinkinį pavadinti kažkuo, ką prisiminsime. Tam aš rekomenduoju pavadinti „heroicons - Outline“.
  • Importo parinktys: tai yra neprivalomi nustatymai, bet aš paprastai pasirenku optimizavimo ir valymo parinktį, kad įsitikinčiau, jog visos piktogramos yra iš karto paruoštos dirbti.

Kai spustelėsite Importuoti, tai padarys viską, ir dabar turėsite savo pirmąjį piktogramų rinkinį „Iconset“!

Galite tęsti tą patį dalyką naudodami tvirtą katalogą, taigi dabar mes turėsime pasiruošę naudoti du mūsų rinkinius.

Šiuo metu galite naudoti „Iconset“, kad galėtumėte ieškoti savo piktogramų ir pamatyti visus failus, kurie šiuo metu yra jūsų kolekcijoje.

3 dalis. „Iconset“ naudojimas su projektavimo programine įranga, pvz., „Figma“

Puikus „Iconset“ dalykas yra tai, kaip lengva jį naudoti su projektavimo programine įranga, tokia kaip „Figma“.

Jei norėčiau prie savo svetainės pridėti voko piktogramą, kad žmonės galėtų su manimi susisiekti, galėčiau ieškoti pašto piktogramos ir paprasčiausiai nuvilkti ją ant savo drobės:

Tada galiu elgtis kaip su bet kokiu kitu vektoriniu dizaino elementu ir iškart panaudoti savo projekte.

4 dalis: „Iconset“ naudojimas kuriant, kaip ir „React“

Kitas šaunus dalykas yra tai, kaip lengva jį naudoti tokiame projekte kaip „React“.

Iš dėžutės gausite keletą skirtingų būdų, kaip galite nukopijuoti failą ir naudoti jį kuriant, pavyzdžiui, kopijuojant kaip JSX.

Jei manau, kad „Next.js Sass Starter“ galėtų naudoti kai kurias puslapio piktogramas, galiu dešiniuoju pelės mygtuku spustelėti bet kurią norimą piktogramą ir skiltyje „Kopijuoti kaip“ pasirinkite „JSX“ galiu įklijuoti ją tiesiai į savo projektą!

Ir nors jums reikės tam tikro stiliaus, kai jį numesite kaip ir bet kurį kitą vaizdą ar piktogramą, jis iškart paruoštas.

5 dalis. Piktogramų rinkinio sinchronizavimas keliuose kompiuteriuose su „Dropbox“

Naudodamiesi „Iconset“ galite persijungti tarp skirtingų bibliotekų. Bet svarbu tai, kad galite nustatyti ir savo bibliotekos vietą.

Kai „Iconset“ sukuria jūsų biblioteką, ji viską išsaugo kaip failus ir duomenų bazę jūsų kompiuteryje.

„Iconset“ vartotojo sąsajoje galime ir perkelti, ir perjungti naudojamą vietą.

Jei pirmą kartą nustatote „Iconset“, galite pradėti spustelėdami Perkelti ir tada pasirinkdami vietą, su kuria norite ją sinchronizuoti.

Kai spustelėsite Perkelti, jis perkels jį į tą katalogą, pvz., Aplanką „Dropbox“, ir sinchronizuos su debesimi, kaip ir bet kuris kitas aplankas ir failas.

Arba, jei jau turite bendrą „Iconset“ biblioteką arba jei tai nustatote naujame kompiuteryje, galite naudoti parinktį „Perjungti“ ir pasirinkti šią parinktį tiesiai iš „Dropbox“.

Paspaudę „Switch“, įkelsite savo bendrąją biblioteką ir būsite pasirengę dirbti produktyviai.

Ką dar galite padaryti?

Skelbkite ir bendrinkite piktogramų rinkinius

Kita šauni savybė yra ta, kad galite eksportuoti rinkinius ir jais dalytis. Jei kolekcijai praleidote daug laiko ir norite ja pasidalinti su kitais, eksportuokite, publikuokite ir dalinkitės su bendruomene!

Daugiau organizacijos

„Iconset“ taip pat palaiko tokias funkcijas kaip aplankai ir parankiniai. Tai leidžia dar lengviau sugrupuoti ir rinkti piktogramas, tačiau jums tikslinga išlaikyti produktyvumą.

Jis taip pat palaiko žymėjimą, todėl dar lengviau ieškoti.

Sekite mane, norėdami sužinoti daugiau „Javascript“, „UX“ ir kitų įdomių dalykų!

  • ? Sekite mane „Twitter“
  • ? Prenumeruokite „My Youtube“
  • ✉️ Prisiregistruokite gauti mano naujienlaiškį
  • ? Rėmėjas mane