Hogyan rendezhetjük és szinkronizálhatjuk az SVG fájlokat az Iconsettel

Az SVG egy fantasztikus módja annak, hogy a vektoros képeket egy tervezési és fejlesztési munkafolyamatba illesszük. De az SVG fájlok gyűjtése és rendszerezése a számítógépen nagy kihívást jelenthet.

Hogyan segíthet az Iconset a fájdalom elhárításában és abban, hogy produktívabbak legyünk?

  • Mi az SVG?
  • Mi az Iconset?
  • Mit fogunk megtanulni?
  • 1. rész: Az Iconset használatának megkezdése
  • 2. rész: Ikonok hozzáadása az Iconset-hez
  • 3. rész: Az Iconset használata olyan tervező szoftverekkel, mint a Figma
  • 4. rész: Az Iconset használata a fejlesztésben, mint a React
  • 5. rész: Az Iconset szinkronizálása több számítógépen a Dropbox segítségével

Mi az SVG?

Az SVG egy közel 20 éves képfájl formátum. És bár ez egy ideje fennáll, csak a közelmúltban kapott lendületet a fejlesztői közösségben.

Az SVG számos okból nagyszerű. Először is, ez egy vektoros formátum, vagyis olyan nagy vagy kicsi méretarányú, amennyit csak akar.

De abban is rugalmas, hogy tipikusan kis fájlmérettel és végtelen skálával használhatja az SVG-t közvetlenül a fejlesztési projektjében. Akár animálhatod is!

Egy csomó fájl összegyűjtése és rendszerezése azonban kihívást jelenthet. Mit nevezel nekik? Van olyan számítógépe, amely könnyedén megtekintheti őket? Mi a helyzet a kereséssel?

Mi az Iconset?

Az Iconset egy ingyenes, platformokon átívelő eszköz, amely lehetővé teszi az összes SVG fájl összegyűjtését és kezelését egy helyen.

Szeretsz gyorsan mozogni a Font Awesome és a heroicons között, de nem akarod folytatni a könyvtárváltást? Az Iconset segítségével gyorsan kereshet és közvetlenül a projektjébe húzhatja.

Ha azt tervezi, hogy egy React projekthez használja, akkor akár át is másolhatja a fájlt JSX-ként, és közvetlenül a projektjébe dobhatja!

Mit fogunk megtanulni?

Végig fogunk járni néhány különböző forgatókönyvet, amelyek megmutatják, mennyire hasznos az Iconset.

Azt is át fogjuk járni, hogy miként kezelheti egyszerűen az Iconset alkalmazást a különböző számítógépek vagy környezetek között, hogy ugyanaz a nagyszerű könyvtár legyen bárhol, ahol dolgozik.

1. rész: Az Iconset használatának megkezdése

A kezdéshez először helyileg kell telepítenie az Iconset alkalmazást. Hasonló telepítési folyamatnak kell lennie, mint bármely más alkalmazásnak.

Miután elkészült és helyben elérhető, képesnek kell lennie arra, hogy megnyissa és megtekinthesse a felhasználói felületet, ahol nincsenek ikonok, ami várható, mivel nem jelenik meg dobozon kívüli ikon.

2. rész: Ikonok hozzáadása az Iconset-hez

Az ikonok hozzáadása az Iconset-hez ugyanolyan egyszerű, mint a behúzás, de a folyamat során van néhány lehetőség.

A kezdéshez töltsük le az ingyenes ikonkészlet-heroikat.

Letöltés: //heroicons.com/.

A Hősök weboldalán meg kell látnia egy nagy Letöltés mindent gombot, amely letölti az összes fájlt tartalmazó zip fájlt.

Ha az optimalizált mappába navigál, akkor látni fogja, hogy kétféle változat létezik: szilárd és vázlatos.

Most, hogy ezeket az Iconset programba helyezze, válassza ki mindegyik mappát külön-külön, és húzza közvetlenül az Iconset mappába.

Miután odaért, van néhány lehetősége.

  • Készlet: Mivel ez az első készletünk, automatikusan létrehoz egy újat. Ha meglévő készletei vannak, importálhatja azokat.
  • Készlet neve: Itt valami olyasmit nevezhetünk meg, amelyre emlékezni fogunk. Ehhez azt ajánlom, hogy nevezze el „heroicons - Vázlat”.
  • Importálási opciók: ezek opcionális beállítások, de általában az optimalizálás és tisztítás opciót választom, hogy megbizonyosodjak arról, hogy az ikonok azonnal készen állnak-e a munkára.

És ha rákattint az Importálás gombra, az megteszi a dolgát, és mostantól megkapja az első ikonkészletet az Iconset-ben!

Folytathatja ugyanezt a szilárd könyvtárral, így készen állunk a két készletre.

Ezen a ponton az Iconset segítségével kereshet az ikonjain, és megtekintheti a gyűjteményében jelenleg elérhető összes fájlt.

3. rész: Az Iconset használata olyan tervező szoftverekkel, mint a Figma

Az Iconset nagyszerű tulajdonsága, hogy mennyire könnyű használni olyan tervező szoftverekkel, mint a Figma.

Ha boríték ikont akartam hozzáadni a webhelyemhez, hogy az emberek kapcsolatba léphessenek velem, megkereshettem a levél ikont, és egyszerűen ráhúztam a vásznamra:

Ezután kezelhetem, mint bármely más vektoros tervezési elemet, és azonnal felhasználhatom a projektemben.

4. rész: Az Iconset használata a fejlesztésben, mint a React

További jó dolog, hogy milyen egyszerű használni egy olyan projektben, mint a React.

A dobozból néhány különböző módon másolhatja a fájlt, és felhasználhatja azt a fejlesztésben, például másolhatja JSX-ként.

Ha úgy érzem, hogy a Next.js Sass Starter-jem használhatna néhány ikont az oldalon, jobb egérgombbal kattinthatok a kívánt ikonra, és a Másolás másként menüpont alatt válassza a JSX lehetőséget, és beilleszthetem közvetlenül a projektembe!

És bár szüksége lesz némi stílusra, ha bedobja ugyanúgy, mint bármely más képet vagy ikont, azonnal készen áll a használatra.

5. rész: Az Iconset szinkronizálása több számítógépen a Dropbox segítségével

Az Iconset használatával lehetősége van váltani a különböző könyvtárak között. De ami fontos, megadhatja a könyvtár helyét is.

Amikor az Iconset létrehozza a könyvtárat, mindent fájlként és adatbázisként tárol a számítógépén.

Az Iconset felhasználói felületen belül pedig mozgathatjuk és átválthatjuk az általunk használt helyet.

Ha először állítja be az Iconset szolgáltatást, akkor kezdje el az Áthelyezés gombra kattintva, majd válassza ki azt a helyet, ahová szinkronizálni szeretné.

Ha pedig az Áthelyezés gombra kattint, akkor az áthelyezi azt a könyvtárba, például a Dropbox mappájába, és szinkronizálja a felhővel, mint bármely más mappát és fájlt.

Alternatív megoldásként, ha már rendelkezik megosztott Iconset-könyvtárral, vagy ha ezt új számítógépen állítja be, használhatja a Váltás opciót, és ezt a lehetőséget közvetlenül a Dropboxból választhatja ki.

Ha pedig megnyomta a Switch gombot, feltölti a megosztott könyvtárat, és készen áll a produktivitásra.

Mi mást tudnál tenni?

Ikonkészletek közzététele és megosztása

További jó tulajdonság, hogy exportálhatja a készleteket és megoszthatja azokat. Ha sok időt töltött egy gyűjteményen, és meg akarja osztani másokkal, exportálja, publikálja és ossza meg a közösséggel!

Több szervezet

Az Iconset olyan funkciókat is támogat, mint a Mappák és a Kedvencek. Ez még egyszerűbbé teszi az ikonok csoportosítását és összegyűjtését, azonban van értelme, hogy produktív maradjon.

Támogatja a címkézést is, ami még könnyebbé teszi a keresést.

Kövessen engem további Javascript, UX és egyéb érdekességekért!

  • ? Kövess a Twitteren
  • ? Feliratkozás a Youtube-ra
  • ✉️ Iratkozzon fel a hírlevelemre
  • ? Támogasson engem