Cara Mengatur dan Menyinkronkan File SVG dengan Iconset

SVG adalah cara luar biasa untuk membawa gambar vektor ke dalam alur kerja desain dan pengembangan. Tetapi mengumpulkan dan mengatur file SVG di komputer Anda bisa menjadi tantangan.

Bagaimana Iconset membantu menghilangkan rasa sakit dan membuat kita lebih produktif?

  • Apa SVG?
  • Apa itu Iconset?
  • Apa yang akan kita pelajari?
  • Bagian 1: Memulai Iconset
  • Bagian 2: Menambahkan ikon ke Iconset
  • Bagian 3: Menggunakan Iconset dengan perangkat lunak desain seperti Figma
  • Bagian 4: Menggunakan Iconset dalam pengembangan seperti dengan React
  • Bagian 5: Menyinkronkan Set Ikon di banyak komputer dengan Dropbox

Apa SVG?

SVG adalah format file gambar berusia hampir 20 tahun. Dan meskipun sudah ada cukup lama, ini baru mendapatkan momentum di komunitas pembangunan.

SVG bagus karena sejumlah alasan. Pertama-tama, ini adalah format vektor, artinya skala sebesar atau sekecil yang Anda inginkan.

Tapi itu juga fleksibel karena Anda dapat menggunakan SVG langsung di proyek pengembangan Anda dengan ukuran file yang biasanya kecil dan skala tak terbatas. Anda bahkan dapat menghidupkannya!

Tetapi mencoba mengumpulkan dan mengatur banyak file bisa jadi menantang. Apa nama Anda? Apakah Anda memiliki komputer yang dapat dengan mudah mempratinjaunya? Bagaimana dengan pencarian?

Apa itu Iconset?

Iconset adalah alat lintas platform gratis yang memungkinkan Anda mengumpulkan dan mengelola semua file SVG di satu tempat.

Senang berpindah dengan cepat antara Font Awesome dan heroicons tetapi tidak ingin terus berpindah perpustakaan? Anda dapat menggunakan Iconset untuk melakukan pencarian cepat dan menyeretnya langsung ke proyek Anda.

Jika Anda berencana menggunakannya untuk proyek React, Anda bahkan dapat menyalin file sebagai JSX dan membuangnya langsung ke proyek Anda!

Apa yang akan kita pelajari?

Kita akan membahas beberapa skenario berbeda yang akan menunjukkan kepada kita bagaimana Iconset berguna.

Kami juga akan menjelaskan bagaimana Anda dapat dengan mudah mengelola Iconset antara komputer atau lingkungan yang berbeda sehingga Anda dapat memiliki perpustakaan hebat yang sama di mana pun Anda bekerja.

Bagian 1: Memulai Iconset

Untuk memulai, Anda harus menginstal Iconset secara lokal terlebih dahulu. Ini harus menjadi proses instalasi yang sama seperti aplikasi lainnya.

Setelah siap dan tersedia secara lokal, Anda harus dapat membukanya dan melihat UI dengan Tanpa Ikon, yang diharapkan, karena tidak disertai ikon apa pun di luar kotak.

Bagian 2: Menambahkan ikon ke Iconset

Menambahkan ikon ke Iconset semudah menyeretnya, tetapi Anda memiliki beberapa opsi selama prosesnya.

Untuk memulai, mari unduh set ikon gratis heroicons.

Unduh di: //heroicons.com/.

Di situs web heroicons, Anda akan melihat tombol Download all yang besar, yang akan mendownload file zip termasuk semua file.

Jika Anda menavigasi ke folder yang dioptimalkan, Anda akan melihat bahwa ada dua versi berbeda: solid dan outline.

Sekarang untuk memasukkannya ke Iconset, pilih setiap folder satu per satu dan seret langsung ke Iconset.

Sesampai di sana, Anda memiliki beberapa opsi.

  • Set: Karena ini adalah set pertama kami, Anda secara otomatis akan membuat yang baru. Jika Anda memiliki set yang ada, Anda dapat mengimpor ke dalam set tersebut.
  • Set Name: Di sini kita dapat memberi nama set sesuatu yang akan kita ingat. Untuk ini, saya sarankan menamakannya "heroicons - Outline".
  • Opsi Impor: ini adalah pengaturan opsional, tetapi saya biasanya memilih opsi optimalkan dan bersihkan untuk memastikan semua ikon segera siap untuk digunakan.

Dan setelah Anda mengklik Impor, itu akan melakukannya, dan Anda sekarang akan memiliki set ikon pertama Anda di Iconset!

Anda dapat melanjutkan dan melakukan hal yang sama dengan direktori solid jadi sekarang kita akan memiliki dua set yang siap digunakan.

Pada titik ini, Anda dapat menggunakan Iconset untuk mencari melalui ikon Anda dan melihat semua file Anda yang saat ini tersedia di koleksi Anda.

Bagian 3: Menggunakan Iconset dengan perangkat lunak desain seperti Figma

Hal yang hebat tentang Iconset adalah betapa mudahnya menggunakannya dengan perangkat lunak desain seperti Figma.

Jika saya ingin menambahkan ikon amplop ke situs web saya sehingga orang dapat menghubungi saya, saya dapat menelusuri ikon surat, dan cukup menyeretnya ke kanvas saya:

Saya kemudian dapat memperlakukannya seperti elemen desain vektor lainnya dan segera menggunakannya dalam proyek saya.

Bagian 4: Menggunakan Iconset dalam pengembangan seperti dengan React

Hal keren lainnya adalah betapa mudahnya digunakan dalam proyek seperti React.

Di luar kotak, Anda mendapatkan beberapa cara berbeda untuk menyalin file dan menggunakannya dalam pengembangan seperti menyalinnya sebagai JSX.

Jika saya merasa Next.js Sass Starter saya dapat menggunakan beberapa ikon pada halaman, saya dapat mengklik kanan ikon apa pun yang saya inginkan dan di bawah Copy As pilih JSX saya dapat menempelkannya langsung ke dalam proyek saya!

Dan sementara itu akan membutuhkan beberapa gaya setelah Anda meletakkannya seperti gambar atau ikon lainnya, itu segera siap untuk digunakan.

Bagian 5: Menyinkronkan Set Ikon di banyak komputer dengan Dropbox

Dengan Iconset, Anda memiliki kemampuan untuk beralih di antara perpustakaan yang berbeda. Namun yang terpenting, Anda juga dapat mengatur lokasi perpustakaan Anda.

Ketika Iconset membuat perpustakaan Anda, itu menyimpan semuanya sebagai file dan database di komputer Anda.

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

Jika ini adalah pertama kalinya Anda mengatur Iconset, Anda dapat mulai dengan mengklik Pindah dan kemudian memilih lokasi yang ingin Anda sinkronkan.

Dan begitu Anda mengeklik Pindahkan, itu akan memindahkannya ke direktori itu, seperti folder di Dropbox, dan disinkronkan ke cloud seperti folder dan file lainnya.

Sebagai alternatif, jika Anda sudah memiliki pustaka Iconset bersama atau jika Anda mengaturnya di komputer baru, Anda dapat menggunakan opsi Switch, dan pilih opsi itu langsung dari Dropbox.

Dan setelah Anda menekan Switch, Anda sekarang akan memuat perpustakaan bersama Anda dan siap untuk menjadi produktif.

Apa lagi yang bisa kamu lakukan?

Publikasikan dan bagikan kumpulan ikon

Fitur keren lainnya adalah Anda dapat mengekspor set dan membagikannya. Jika Anda telah menghabiskan banyak waktu untuk sebuah koleksi dan ingin membagikannya dengan orang lain, ekspor, publikasikan, dan bagikan dengan komunitas!

Lebih banyak organisasi

Iconset juga mendukung fitur seperti Folder dan Favorit. Ini membuatnya lebih mudah untuk mengelompokkan dan mengumpulkan ikon, namun masuk akal bagi Anda untuk membuat Anda tetap produktif.

Ini juga mendukung penandaan, membuatnya lebih mudah untuk mencari.

Ikuti saya untuk lebih banyak Javascript, UX, dan hal menarik lainnya!

  • ? Ikuti saya di Twitter
  • ? Berlangganan ke Youtube Saya
  • ✔️ Daftar Untuk Buletin Saya
  • ? Sponsori Saya