Membuat SVG Icon Component di Vue.js

Langkah-langkah membuat SVG Icon Component di framework Vue.js

Sumber gambar: pexels.com

Kenapa SVG? Buat temen-temen yang sudah membaca artikel saya “Pengetahuan dasar untuk mempercepat loading sebuah website” pastinya tau kenapa saya memilih menggunakan inline SVG dibandingkan font icon seperti yang beberapa tahun belakangan ini menjadi praktek umum dikerjakan oleh web developer. SVG dengan bentuknya yang merupakan markup xml ini bisa secara langsung di embed ke dalam kode HTML. Pun SVG memiliki kelebihan karena bisa kita set dimensinya tanpa takut pecah secara visual dan bisa dimanipulasi dengan mudah warnanya.

Bukan berarti lantas SVG datang tanpa kelemahan, ada konsekuensi ketika kalian memilih menggunakan SVG dibandingkan font icon untuk menampilkan berbagai icon di web kalian, seperti sumber daya yang dibutuhkan browser untuk me-render sebuah SVG sedikit lebih banyak dibandingkan ketika harus me-render sebuah font icon. Begitupun ketika proses development, menggunakan font icon kita bisa dengan mudah memanggil sebuah icon, biasanya cukup menambahkan sebuah class pada element tertentu dan icon akan muncul begitu mudah. Dengan SVG kita akan kesulitan me-maintain icon, apalagi ketika jumlah icon semakin meningkat.

SVG Pada dasarnya bisa kita perlakukan seperti image pada umumnya, dimana kita bisa menampilkan menggunakan tag img, namun tentu saja cara ini bukan hal yang ingin kita capai pada artikel kali ini. Kali ini kita akan bahas bagaimana menggunakan SVG sebagai inline markup di HTML dan membuatnya lebih mudah di reuse pada sebuah projek.

Yang akan kita lakukan adalah membuat SVG tersebut menjadi Component seperti kebanyakan kita memperlakukan sebuah elemen lainnya pada Vue. Untuk membuat Component Inline SVG kalian bisa ikuti langkah-langkah berikut:

Membuat Komponen Dasar

Kita akan mempersiapkan komponen dasar untuk ini, berikut contoh kode sederhana ketika kita harus membuat komponen di Vue:

Tambahkan SVG Markup

Katakanlah kita akan membuat sebuah komponen dari file SVG berikut facebook.svg, maka yang perlu kita lakukan adalah mengambil markup dari file tersebut. File diatas memiliki markup sebagai berikut:

Dari markup tersebut, kita akan mengubah komponen kita menjadi seperti berikut:

Optimize SVG Markup

SVG markup yang sebelumnya kita copy sebenarnya tidak kesemuanya benar-benar dibutuhkan, karenanya kita akan menghilangkan beberapa bagian atau attribute yang tidak dibutuhkan seperti attribute xmlns dan role serta element title, dan berikut hasilnya:

Tambahkan Props

Kita pastinya nanti akan memanipulasi SVG komponen ini berdasarkan penempatannya. Tempat yang paling pas untuk ini adalah dengan menyediakan props sesuai dengan kebutuhan kita. Saya definisikan kebutuhan minimal untuk bisa memanipulasi SVG ini adalah props height, width dan color. Berikut kode komponen kita:

Memindahkan props ke Mixins

Sampai langkah diatas sebenarnya komponen sudah bisa digunakan, namun ketika harus membuat beberapa icon tentu kita diharuskan membuat setup yang sama dan berulang dibanyak tempat. Karenanya saya memilih untuk memindahkan props kedalam mixins yang bisa digunakan berulang di icon lainnya, berikut cara membuat dan menggunakan mixins:

Dan berikut cara menggunakan mixin di komponen kita:

Contoh penggunaan

Demikian komponen kita sudah bisa digunakan pada komponen lain yang membutuhkan. Untuk menggunakannya kita bisa memanggil dengan cara semudah berikut:

Atau kita bisa memilih untuk memasang secara global meskipun saya pribadi tidak menyarankan cara ini karena akan berefek ke semua halaman yang ada, berikut caranya:

Egoist sebenarnya sudah membuat package svg-to-vue-component yang bisa melakukan hal yang hampir mirip namun dengan pendekatan yang berbeda dan dengan cara yang lebih mudah, silahkan ditengok.


Demikian tulisan pendek kali ini, silahkan tinggalkan komentar, saran dan kritik kalian di kolom komentar.

Semoga bermanfaat tulisannya…

 

Irfan Maulana

Seorang pengembang web antar muka dengan pengalaman lebih dari 5 tahun di beberapa perusahaan. Pengetahuan saya meliputi HTML, CSS, dan JavaScript. Saya juga memiliki beberapa projek open source yang bisa kalian lihat di Github saya @mazipan. Selalu senang hati bisa berbagi pengetahuan dan pengalaman dengan teman-teman.