Sådan organiseres og synkroniseres SVG-filer med Iconset

SVG er en fantastisk måde at bringe vektorbilleder ind i en design- og udviklingsworkflow. Men at indsamle og organisere SVG-filer på din computer kan være udfordrende.

Hvordan kan Iconset hjælpe med at fjerne smerten og få os mere produktive?

  • Hvad er SVG?
  • Hvad er Iconset?
  • Hvad skal vi lære?
  • Del 1: Kom godt i gang med Iconset
  • Del 2: Tilføjelse af ikoner til Iconset
  • Del 3: Brug af Iconset med designsoftware som Figma
  • Del 4: Brug af Iconset i udvikling som med React
  • Del 5: Synkronisering af ikonsæt på tværs af flere computere med Dropbox

Hvad er SVG?

SVG er et næsten 20 år gammelt billedfilformat. Og mens det har eksisteret i et stykke tid, har det først for nylig fået fart i udviklingssamfundet.

SVG er fantastisk af en række årsager. Først og fremmest er det et vektorformat, hvilket betyder, at det skaleres så stort eller lille, som du vil.

Men det er også fleksibelt, fordi du kan bruge SVG lige i dit udviklingsprojekt med en typisk lille filstørrelse og uendelig skala. Du kan endda animere det!

Men at prøve at indsamle og organisere en masse filer kan være udfordrende. Hvad navngiver du dem? Har du en computer, der nemt kan få vist dem? Hvad med søgning?

Hvad er Iconset?

Iconset er et gratis værktøj på tværs af platforme, der giver dig mulighed for at samle og administrere alle dine SVG-filer ét sted.

Elsker du hurtigt at skifte mellem Font Awesome og heroicons, men vil ikke fortsætte med at skifte bibliotek? Du kan bruge Iconset til at foretage en hurtig søgning og trække det lige ind i dit projekt.

Hvis du planlægger at bruge det til et React-projekt, kan du endda kopiere filen som JSX og dumpe den direkte i dit projekt!

Hvad skal vi lære?

Vi går gennem et par forskellige scenarier, der viser os, hvordan Iconset er nyttigt.

Vi vil også gennemgå, hvordan du nemt kan administrere Iconset mellem forskellige computere eller miljøer, så du kan have det samme fantastiske bibliotek, hvor som helst du arbejder.

Del 1: Kom godt i gang med Iconset

For at komme i gang skal du først installere Iconset lokalt. Det skal være en lignende installationsproces som enhver anden applikation.

Når den er klar og tilgængelig lokalt, skal du kunne åbne den og se et brugergrænseflade uden ikoner, hvilket forventes, da det ikke kommer med nogen ikoner ud af kassen.

Del 2: Tilføjelse af ikoner til Iconset

Tilføjelse af ikoner til Iconset er lige så let som at trække ind, men du har et par muligheder under processen.

Lad os downloade de gratis ikoniske heroicons for at komme i gang.

Download på: //heroicons.com/.

På heroicons-webstedet skal du se en stor Download all-knap, som vil downloade en zip-fil inklusive alle filerne.

Hvis du navigerer til den optimerede mappe, kan du se, at der er to forskellige versioner: solid og omridset.

For at få disse til Iconset skal du vælge hver mappe individuelt og trække den lige ind i Iconset.

Når du er der, har du et par muligheder.

  • Sæt: Da dette er vores første sæt, opretter du automatisk et nyt. Hvis du havde eksisterende sæt, kunne du importere til disse sæt.
  • Set Name: Her kan vi navngive sættet noget, som vi husker. Til dette anbefaler jeg at navngive det "heroicons - Outline".
  • Importindstillinger: disse er valgfri indstillinger, men jeg vælger typisk optimerings- og rengøringsmuligheden for at sikre, at ikoner straks er klar til at arbejde med.

Og når du først har klikket på Importer, vil det gøre det, og du får nu dit første sæt ikoner i Iconset!

Du kan gå videre og gøre det samme med den solide mappe, så så har vi vores to sæt klar til brug.

På dette tidspunkt kan du bruge Iconset til at søge gennem dine ikoner og se alle dine filer, der aktuelt er tilgængelige i din samling.

Del 3: Brug af Iconset med designsoftware som Figma

Det fantastiske ved Iconset er, hvor let det er at bruge det med designsoftware som Figma.

Hvis jeg ville tilføje et konvolutikon til mit websted, så folk kunne kontakte mig, kunne jeg søge efter mailikonet og blot trække det på mit lærred:

Jeg kan derefter behandle det som ethvert andet vektordesignelement og straks bruge det i mit projekt.

Del 4: Brug af Iconset i udvikling som med React

En anden cool ting er, hvor let det er at bruge i et projekt som React.

Uden for boksen får du et par forskellige måder, du kan kopiere filen og bruge den i udvikling som at kopiere den som JSX.

Hvis jeg har lyst til, at min Next.js Sass Starter kunne bruge nogle ikoner på siden, kan jeg højreklikke på et hvilket som helst ikon, jeg ønsker, og under Kopier som vælg JSX, kan jeg indsætte det lige ind i mit projekt!

Og selvom det har brug for noget styling, når du først slipper det ind som ethvert andet billede eller ikon, er det straks klar til brug.

Del 5: Synkronisering af ikonsæt på tværs af flere computere med Dropbox

Med Iconset har du muligheden for at skifte mellem forskellige biblioteker. Men vigtigst af alt kan du også indstille placeringen af ​​dit bibliotek.

Når Iconset opretter dit bibliotek, gemmer det alt som filer og en database på din computer.

Og inde i Iconset UI kan vi både flytte og skifte den placering, vi bruger.

Hvis dette er første gang du konfigurerer Iconset, kan du starte med at klikke på Flyt og derefter vælge den placering, du vil synkronisere den til.

Og når du først har klikket på Flyt, flyttes den til den mappe som en mappe på Dropbox og synkroniseres til skyen som enhver anden mappe og fil.

Alternativt, hvis du allerede har et delt Iconset-bibliotek, eller hvis du konfigurerer dette på en ny computer, kan du bruge indstillingen Skift og vælge den mulighed lige fra Dropbox.

Og når du først har ramt Switch, vil du nu indlæse dit delte bibliotek og være klar til at blive produktiv.

Hvad kan du ellers gøre?

Udgiv og del ikonsæt

En anden cool funktion er, at du kan eksportere sæt og dele dem. Hvis du har brugt meget tid på en samling og vil dele den med andre, skal du eksportere den, offentliggøre den og dele den med samfundet!

Mere organisation

Iconset understøtter også funktioner som mapper og favoritter. Dette gør det endnu nemmere at gruppere og samle ikonerne, men det giver mening for dig at holde dig produktiv.

Det understøtter også tagging, hvilket gør det endnu nemmere at søge.

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev
  • ? Sponsor mig