Come organizzare e sincronizzare i file SVG con Iconset

SVG è un modo fantastico per portare immagini vettoriali in un flusso di lavoro di progettazione e sviluppo. Ma raccogliere e organizzare i file SVG sul tuo computer può essere difficile.

In che modo Iconset può aiutarci a eliminare il dolore e renderci più produttivi?

  • Cos'è SVG?
  • Cos'è Iconset?
  • Cosa impareremo?
  • Parte 1: Introduzione a Iconset
  • Parte 2: aggiunta di icone a Iconset
  • Parte 3: utilizzo di Iconset con software di progettazione come Figma
  • Parte 4: utilizzo di Iconset in fase di sviluppo come con React
  • Parte 5: sincronizzazione di Iconset su più computer con Dropbox

Cos'è SVG?

SVG è un formato di file immagine vecchio di quasi 20 anni. E mentre è in circolazione da un po ', solo di recente ha guadagnato slancio nella comunità di sviluppo.

SVG è ottimo per una serie di motivi. Prima di tutto, è un formato vettoriale, il che significa che scala grande o piccola come vuoi.

Ma è anche flessibile in quanto puoi utilizzare SVG direttamente nel tuo progetto di sviluppo con file di dimensioni generalmente ridotte e scala infinita. Puoi persino animarlo!

Ma provare a raccogliere e organizzare un gruppo di file può essere difficile. Come li chiami? Hai un computer che può facilmente visualizzarli in anteprima? E la ricerca?

Cos'è Iconset?

Iconset è uno strumento multipiattaforma gratuito che ti consente di raccogliere e gestire tutti i tuoi file SVG in un unico posto.

Ti piace passare rapidamente da Font Awesome a Heroicons ma non vuoi continuare a cambiare libreria? Puoi usare Iconset per fare una ricerca veloce e trascinarlo direttamente nel tuo progetto.

Se hai intenzione di usarlo per un progetto React, puoi persino copiare il file come JSX e scaricarlo direttamente nel tuo progetto!

Cosa impareremo?

Esamineremo alcuni scenari diversi che ci mostreranno come Iconset è utile.

Vedremo anche come gestire facilmente Iconset tra diversi computer o ambienti in modo da poter avere la stessa grande libreria ovunque tu lavori.

Parte 1: Introduzione a Iconset

Per iniziare, devi prima installare Iconset in locale. Dovrebbe essere un processo di installazione simile a qualsiasi altra applicazione.

Una volta che è pronto e disponibile localmente, dovresti essere in grado di aprirlo e vedere un'interfaccia utente senza icone, il che è previsto, poiché non viene fornito con alcuna icona pronta per l'uso.

Parte 2: aggiunta di icone a Iconset

Aggiungere icone a Iconset è facile come trascinarle, ma durante il processo sono disponibili alcune opzioni.

Per iniziare, scarichiamo il set di icone gratuito heroicons.

Scarica su: //heroicons.com/.

Sul sito web di Heroicons, dovresti vedere un grande pulsante Scarica tutto, che scaricherà un file zip che include tutti i file.

Se navighi nella cartella ottimizzata, vedrai che ci sono due diverse versioni: solido e contorno.

Ora per inserirli in Iconset, seleziona ciascuna cartella individualmente e trascinala direttamente in Iconset.

Una volta lì, hai alcune opzioni.

  • Set: poiché questo è il nostro primo set, ne creerai automaticamente uno nuovo. Se avessi set esistenti, potresti importarli in quei set.
  • Set Name: qui possiamo dare al set un nome che ricorderemo. Per questo, consiglio di chiamarlo "heroicons - Outline".
  • Opzioni di importazione: queste sono impostazioni opzionali, ma in genere seleziono l'opzione di ottimizzazione e pulizia per assicurarmi che tutte le icone siano immediatamente pronte per l'uso.

E una volta che fai clic su Importa, funzionerà e ora avrai il tuo primo set di icone in Iconset!

Puoi andare avanti e fare la stessa cosa con la directory solida, quindi ora avremo i nostri due set pronti per l'uso.

A questo punto, puoi utilizzare Iconset per cercare tra le tue icone e vedere tutti i tuoi file attualmente disponibili nella tua raccolta.

Parte 3: utilizzo di Iconset con software di progettazione come Figma

La cosa grandiosa di Iconset è quanto sia facile usarlo con software di progettazione come Figma.

Se volessi aggiungere un'icona a forma di busta al mio sito Web in modo che le persone possano contattarmi, potrei cercare l'icona della posta e trascinarla semplicemente sulla mia tela:

Posso quindi trattarlo come qualsiasi altro elemento di disegno vettoriale e utilizzarlo immediatamente nel mio progetto.

Parte 4: utilizzo di Iconset in fase di sviluppo come con React

Un'altra cosa interessante è quanto sia facile da usare in un progetto come React.

Fuori dagli schemi, ottieni diversi modi per copiare il file e usarlo nello sviluppo come copiarlo come JSX.

Se ritengo che il mio Next.js Sass Starter possa utilizzare alcune icone sulla pagina, posso fare clic con il pulsante destro del mouse su qualsiasi icona desidero e sotto Copia come selezionare JSX posso incollarlo direttamente nel mio progetto!

E mentre avrà bisogno di un po 'di stile una volta che lo inserisci come qualsiasi altra immagine o icona, è immediatamente pronto per l'uso.

Parte 5: sincronizzazione di Iconset su più computer con Dropbox

Con Iconset, hai la possibilità di passare da una libreria all'altra. Ma soprattutto, puoi anche impostare la posizione della tua libreria.

Quando Iconset crea la tua libreria, memorizza tutto come file e un database sul tuo computer.

E all'interno dell'interfaccia utente di Iconset, possiamo sia spostare che cambiare la posizione che usiamo.

Se è la prima volta che configuri Iconset, puoi iniziare facendo clic su Sposta e quindi selezionando la posizione in cui desideri sincronizzarlo.

E una volta che fai clic su Sposta, lo sposterà in quella directory, come una cartella su Dropbox, e si sincronizzerà con il cloud come qualsiasi altra cartella e file.

In alternativa, se hai già una libreria di Iconset condivisa o se la stai configurando su un nuovo computer, puoi utilizzare l'opzione Cambia e selezionarla direttamente da Dropbox.

E una volta premuto Switch, caricherai la tua libreria condivisa e sarai pronto per diventare produttivo.

Cos'altro puoi fare?

Pubblica e condividi set di icone

Un'altra caratteristica interessante è che puoi esportare set e condividerli. Se hai dedicato molto tempo a una raccolta e desideri condividerla con altri, esportala, pubblicala e condividila con la comunità!

Più organizzazione

Iconset supporta anche funzionalità come cartelle e preferiti. Ciò rende ancora più semplice raggruppare e raccogliere le icone, tuttavia ha senso per te mantenerti produttivo.

Supporta anche la codifica, rendendo ancora più facile la ricerca.

Seguimi per ulteriori informazioni su Javascript, UX e altre cose interessanti!

  • ? Seguimi su Twitter
  • ? Iscriviti al mio Youtube
  • ✉️ Iscriviti alla mia newsletter
  • ? Sponsorizzami