Cara Menyusun dan Menyegerakkan Fail SVG dengan Iconset

SVG adalah kaedah hebat untuk memasukkan gambar vektor ke dalam aliran kerja reka bentuk dan pembangunan. Tetapi mengumpulkan dan menyusun fail SVG di komputer anda boleh menjadi sesuatu yang sukar.

Bagaimana Iconset dapat menghilangkan rasa sakit dan menjadikan kita lebih produktif?

  • Apa itu SVG?
  • Apa itu Iconset?
  • Apa yang akan kita pelajari?
  • Bahagian 1: Bermula dengan Iconset
  • Bahagian 2: Menambah ikon ke Ikon
  • Bahagian 3: Menggunakan Iconset dengan perisian reka bentuk seperti Figma
  • Bahagian 4: Menggunakan Ikon dalam pembangunan seperti dengan React
  • Bahagian 5: Menyelaraskan Ikon di beberapa komputer dengan Dropbox

Apa itu SVG?

SVG adalah format fail gambar berusia hampir 20 tahun. Dan walaupun sudah lama berlaku, baru-baru ini mendapat momentum dalam komuniti pembangunan.

SVG sangat bagus untuk beberapa sebab. Pertama sekali, ia adalah format vektor, yang bermaksud skala sama besar atau kecil yang anda mahukan.

Tetapi ia juga fleksibel kerana anda dapat menggunakan SVG tepat dalam projek pembangunan anda dengan ukuran fail yang biasanya kecil dan skala yang tidak terbatas. Anda juga boleh menghidupkannya!

Tetapi mencuba mengumpulkan dan menyusun sekumpulan fail boleh menjadi cabaran. Apa nama anda? Adakah anda mempunyai komputer yang dapat melihatnya dengan mudah? Bagaimana dengan carian?

Apa itu Iconset?

Iconset adalah alat lintas platform percuma yang membolehkan anda mengumpulkan dan mengurus semua fail SVG anda di satu tempat.

Suka bergerak cepat antara Font Awesome dan heroik tetapi tidak mahu terus menukar perpustakaan? Anda boleh menggunakan Iconset untuk membuat carian pantas dan menyeretnya terus ke projek anda.

Sekiranya anda merancang untuk menggunakannya untuk projek React, anda bahkan boleh menyalin fail tersebut sebagai JSX dan membuangnya terus ke projek anda!

Apa yang akan kita pelajari?

Kami akan melalui beberapa senario yang berbeza yang akan menunjukkan kepada kami bagaimana Iconset berguna.

Kami juga akan meninjau bagaimana anda dapat menguruskan Ikon dengan mudah di antara komputer atau persekitaran yang berbeza supaya anda dapat memiliki perpustakaan hebat yang sama di mana sahaja anda bekerja.

Bahagian 1: Bermula dengan Iconset

Untuk memulakan, anda perlu memasang Iconset terlebih dahulu secara tempatan. Ini semestinya proses pemasangan yang serupa dengan aplikasi lain.

Setelah siap dan tersedia secara tempatan, anda seharusnya dapat membukanya dan melihat UI Tanpa Ikon, yang diharapkan, kerana ia tidak dilengkapi dengan ikon di luar kotak.

Bahagian 2: Menambah ikon ke Ikon

Menambah ikon ke Iconset semudah menyeret masuk, tetapi anda mempunyai beberapa pilihan semasa prosesnya.

Untuk memulakan, mari memuat turun pahlawan set ikon percuma.

Muat turun di: //heroicons.com/.

Di laman web pahlawan, anda akan melihat butang Muat turun semua yang besar, yang akan memuat turun fail zip termasuk semua fail.

Sekiranya anda menavigasi ke folder yang dioptimumkan, anda akan melihat bahawa terdapat dua versi yang berbeza: padat dan garis besar.

Sekarang untuk memasukkannya ke dalam Ikon, pilih setiap folder secara berasingan dan seret ke dalam Ikon.

Sesampai di sana, anda mempunyai beberapa pilihan.

  • Set: Oleh kerana ini adalah set pertama kami, anda akan membuat yang baru secara automatik. Sekiranya anda mempunyai set yang ada, anda boleh mengimport ke dalam set tersebut.
  • Set Name: Di sini kita dapat menamakan set sesuatu yang akan kita ingat. Untuk ini, saya cadangkan untuk menamakannya "heroikon - Garis Besar".
  • Pilihan Import: ini adalah tetapan pilihan, tetapi saya biasanya memilih pilihan mengoptimumkan dan membersihkan untuk memastikan sebarang ikon segera siap untuk digunakan.

Dan setelah anda mengeklik Import, ia akan berjaya, dan sekarang anda akan mempunyai set ikon pertama anda dalam Ikon!

Anda boleh terus maju dan melakukan perkara yang sama dengan direktori padat, jadi sekarang kami akan menyediakan dua set kami untuk digunakan.

Pada ketika ini, anda boleh menggunakan Iconset untuk mencari ikon anda dan melihat semua fail anda yang ada dalam koleksi anda.

Bahagian 3: Menggunakan Iconset dengan perisian reka bentuk seperti Figma

Perkara hebat mengenai Iconset adalah betapa mudahnya menggunakannya dengan perisian reka bentuk seperti Figma.

Sekiranya saya ingin menambahkan ikon sampul surat ke laman web saya supaya orang dapat menghubungi saya, saya dapat mencari ikon surat, dan hanya menyeretnya ke kanvas saya:

Saya kemudian boleh memperlakukannya seperti elemen reka bentuk vektor lain dan segera menggunakannya dalam projek saya.

Bahagian 4: Menggunakan Ikon dalam pembangunan seperti dengan React

Satu lagi perkara yang menarik adalah betapa mudahnya digunakan dalam projek seperti React.

Di luar kotak, anda mendapat beberapa cara berbeza untuk menyalin fail dan menggunakannya dalam pembangunan seperti menyalinnya sebagai JSX.

Sekiranya saya rasa Next.js Sass Starter saya boleh menggunakan beberapa ikon di halaman, saya boleh mengklik kanan mana-mana ikon yang saya mahukan dan di bawah Salin Sebagai pilih JSX saya boleh menampalnya terus ke projek saya!

Dan walaupun ia memerlukan beberapa gaya setelah anda memasukkannya seperti gambar atau ikon lain, ia segera siap digunakan.

Bahagian 5: Menyelaraskan Ikon di beberapa komputer dengan Dropbox

Dengan Iconset, anda mempunyai kemampuan untuk beralih antara perpustakaan yang berbeza. Tetapi yang penting, anda juga boleh menetapkan lokasi perpustakaan anda.

Semasa Iconset membuat pustaka anda, ia menyimpan semuanya sebagai fail dan pangkalan data di komputer anda.

Dan di dalam UI Iconset, kami dapat Memindahkan dan Menukar lokasi yang kami gunakan.

Sekiranya ini adalah kali pertama anda menyiapkan Iconset, anda boleh mulakan dengan mengklik Pindah dan kemudian memilih lokasi yang ingin anda segerakkan.

Dan setelah anda mengklik Pindahkan, ia akan memindahkannya ke direktori itu, seperti folder di Dropbox, dan menyegerakkan ke awan seperti folder dan fail lain.

Sebagai alternatif, jika anda sudah mempunyai pustaka Iconset yang dikongsi atau jika anda menyiapkannya di komputer baru, anda boleh menggunakan pilihan Tukar, dan memilih pilihan tersebut terus dari Dropbox.

Dan setelah anda menekan Switch, anda sekarang akan memuatkan pustaka bersama anda dan bersedia untuk menjadi produktif.

Apa lagi yang boleh anda lakukan?

Terbitkan dan kongsi set ikon

Satu lagi ciri menarik ialah anda boleh mengeksport set dan membaginya. Sekiranya anda menghabiskan banyak masa untuk koleksi dan ingin membaginya dengan orang lain, eksport, terbitkan dan kongsi dengan komuniti!

Lebih banyak organisasi

Iconset juga menyokong ciri seperti Folder dan Kegemaran. Ini menjadikannya lebih mudah untuk mengelompokkan dan mengumpulkan ikon namun masuk akal bagi anda untuk memastikan anda sentiasa produktif.

Ia juga menyokong penandaan, menjadikannya lebih mudah untuk dicari.

Ikuti saya untuk lebih banyak Javascript, UX, dan perkara menarik lain!

  • ? Ikuti saya di Twitter
  • ? Langgan Youtube Saya
  • ✉️ Daftar ke Buletin Saya
  • ? Taja Saya