Kuinka organisoida ja synkronoida SVG-tiedostoja Iconsetin kanssa

SVG on mahtava tapa tuoda vektorikuvat suunnittelu- ja kehitystyönkulkuun. Mutta SVG-tiedostojen kerääminen ja järjestäminen tietokoneellesi voi olla haastavaa.

Kuinka Iconset voi auttaa poistamaan kivun ja saamaan meidät tuottavammiksi?

  • Mikä on SVG?
  • Mikä on Iconset?
  • Mitä aiomme oppia?
  • Osa 1: Iconsetin käytön aloittaminen
  • Osa 2: Kuvakkeiden lisääminen Iconsetiin
  • Osa 3: Iconsetin käyttö suunnitteluohjelmiston kanssa, kuten Figma
  • Osa 4: Iconsetin käyttö kehityksessä kuten React
  • Osa 5: Iconsetin synkronointi useiden tietokoneiden kanssa Dropboxin kanssa

Mikä on SVG?

SVG on lähes 20 vuotta vanha kuvatiedostomuoto. Ja vaikka se on ollut olemassa jonkin aikaa, se on vasta hiljattain saanut vauhtia kehitysyhteisössä.

SVG on loistava monista syistä. Ensinnäkin, se on vektorimuoto, eli se skaalautuu niin suureksi kuin pieneksi kuin haluat.

Mutta se on myös joustava, koska voit käyttää SVG: tä suoraan kehitysprojektissasi tyypillisesti pienellä tiedostokoolla ja äärettömällä mittakaavalla. Voit jopa animoida sen!

Mutta yrittää kerätä ja järjestää joukko tiedostoja voi olla haastavaa. Mitä nimität heille? Onko sinulla tietokone, joka voi helposti esikatsella niitä? Entä haku?

Mikä on Iconset?

Iconset on ilmainen alustojen välinen työkalu, jonka avulla voit kerätä ja hallita kaikkia SVG-tiedostojasi yhdessä paikassa.

Haluatko siirtyä nopeasti Font Awesomen ja sankarien välillä, mutta et halua jatkaa kirjastojen vaihtamista? Voit tehdä pikahakua Iconsetin avulla ja vetää sen suoraan projektiisi.

Jos aiot käyttää sitä React-projektissa, voit jopa kopioida tiedoston JSX: nä ja viedä sen suoraan projektiisi!

Mitä aiomme oppia?

Käymme läpi muutamia erilaisia ​​skenaarioita, jotka osoittavat meille, kuinka Iconset on hyödyllinen.

Aiomme myös käydä läpi, kuinka voit hallita Iconsetia helposti eri tietokoneiden tai ympäristöjen välillä, jotta sinulla olisi sama suuri kirjasto missä tahansa.

Osa 1: Iconsetin käytön aloittaminen

Aloittamiseksi sinun on ensin asennettava Iconset paikallisesti. Sen pitäisi olla samanlainen asennusprosessi kuin minkä tahansa muun sovelluksen.

Kun se on valmis ja saatavana paikallisesti, sinun on voitava avata se ja nähdä käyttöliittymä, jossa ei ole kuvakkeita, mikä on odotettavissa, koska siinä ei ole mitään kuvakkeita laatikosta.

Osa 2: Kuvakkeiden lisääminen Iconsetiin

Kuvakkeiden lisääminen Iconsetiin on yhtä helppoa kuin vetäminen, mutta sinulla on muutama vaihtoehto prosessin aikana.

Aloita lataamalla ilmaiset kuvakesarjan sankarit.

Lataa osoitteesta: //heroicons.com/.

Sankaritarien verkkosivustolla pitäisi nähdä iso Lataa kaikki -painike, joka lataa zip-tiedoston, joka sisältää kaikki tiedostot.

Jos siirryt optimoituun kansioon, huomaat, että versioita on kaksi: kiinteä ja ääriviiva.

Nyt saat nämä Iconsetiin valitsemalla kukin kansio erikseen ja vetämällä se suoraan Iconsetiin.

Sinulla on muutama vaihtoehto.

  • Joukko: Koska tämä on ensimmäinen sarjamme, luot automaattisesti uuden. Jos sinulla olisi olemassa olevia sarjoja, voit tuoda niihin.
  • Joukon nimi: Täällä voimme nimetä joukon jotain, joka muistat. Tätä varten suosittelen nimeämään se "heroicons - Outline".
  • Tuontiasetukset: nämä ovat valinnaisia ​​asetuksia, mutta valitsen yleensä optimoi ja puhdista -vaihtoehdon varmistaakseni, että kaikki kuvakkeet ovat heti valmiita työskentelemään.

Ja kun napsautat Tuo, se tekee asian, ja sinulla on nyt ensimmäiset kuvakkeet Iconsetissa!

Voit mennä eteenpäin ja tehdä saman asian kiinteän hakemiston kanssa, joten meillä on nyt kaksi sarjaa valmiina.

Tässä vaiheessa voit käyttää Iconset-sovellusta etsiäksesi kuvakkeita ja nähdäksesi kaikki kokoelmassasi tällä hetkellä käytettävissä olevat tiedostot.

Osa 3: Iconsetin käyttö suunnitteluohjelmiston kanssa, kuten Figma

Iconsetin hieno asia on, kuinka helppoa sitä on käyttää Figma-kaltaisten suunnitteluohjelmistojen kanssa.

Jos halusin lisätä kirjekuorikuvakkeen verkkosivustooni, jotta ihmiset voisivat ottaa minuun yhteyttä, voisin etsiä postikuvaketta ja vetää sen yksinkertaisesti kankaalleni:

Voin sitten kohdella sitä kuin mitä tahansa muuta vektorisuunnitteluelementtiä ja käyttää sitä heti projektissani.

Osa 4: Iconsetin käyttö kehityksessä kuten React

Toinen hieno asia on kuinka helppoa sitä on käyttää React-kaltaisessa projektissa.

Pakkauksesta saat muutaman tavan, jolla voit kopioida tiedoston ja käyttää sitä kehityksessä, kuten kopioimalla se JSX: nä.

Jos minusta tuntuu, että Next.js Sass Starter -laitteeni voisi käyttää joitain kuvakkeita sivulla, voin napsauttaa hiiren kakkospainikkeella mitä tahansa haluamaasi kuvaketta ja kohdassa Kopioi nimellä Valitse JSX voin liittää sen suoraan projektiini!

Ja vaikka se tarvitsee jonkin verran muotoilua, kun pudotat sen aivan kuten mikä tahansa muu kuva tai kuvake, se on heti valmis menemään.

Osa 5: Iconsetin synkronointi useiden tietokoneiden kanssa Dropboxin kanssa

Iconsetin avulla voit vaihtaa eri kirjastojen välillä. Mutta mikä tärkeintä, voit myös asettaa kirjastosi sijainnin.

Kun Iconset luo kirjastosi, se tallentaa kaiken tiedostoina ja tietokantana tietokoneellesi.

Ja Iconset-käyttöliittymän sisällä voimme sekä siirtää että vaihtaa käyttämäämme sijaintia.

Jos asetat Iconsetin ensimmäistä kertaa, voit aloittaa napsauttamalla Siirrä ja valitsemalla sitten sijainnin, johon haluat synkronoida sen.

Ja kun napsautat Siirrä, se siirtää sen kyseiseen hakemistoon, kuten Dropbox-kansioon, ja synkronoituu pilveen kuten kaikki muut kansiot ja tiedostot.

Vaihtoehtoisesti, jos sinulla on jo jaettu Iconset-kirjasto tai jos asetat tätä uudelle tietokoneelle, voit käyttää Vaihda-vaihtoehtoa ja valita kyseisen vaihtoehdon suoraan Dropboxista.

Ja kun osut Switchiin, lataat nyt jaetun kirjastosi ja olet valmis tuottamaan.

Mitä muuta voit tehdä?

Julkaise ja jaa kuvakesarjoja

Toinen hieno ominaisuus on, että voit viedä sarjoja ja jakaa niitä. Jos olet viettänyt paljon aikaa kokoelmaan ja haluat jakaa sen muiden kanssa, vie se, julkaise ja jaa yhteisön kanssa!

Lisää organisaatiota

Iconset tukee myös ominaisuuksia, kuten Kansiot ja Suosikit. Tämä helpottaa kuvakkeiden ryhmittelyä ja keräämistä, mutta on järkevää pitää sinut tuottavana.

Se tukee myös koodausta, mikä tekee hausta entistäkin helpompaa.

Seuraa minua saadaksesi lisää Javascriptiä, UX: ää ja muita mielenkiintoisia asioita!

  • ? Seuraa minua Twitterissä
  • ? Tilaa Youtube
  • ✉️ Rekisteröidy uutiskirjeeseen
  • ? Sponsori minua