Cara Menggunakan SVG Icon di Vuetify

Vuetify adalah framework frontend pengembangan situs dengan menggunakan Vuejs. Framework ini dibuat untuk memudahkan penerapan material design, didalamnya terdapat berbagai fitur termasuk icon. Vuetify menyediakan beberapa icon yang dapat langsung digunakan bersama dengan komponen framework lainnya tanpa perlu melakukan penambahan packages baru, namun, icon yang disediakan di sini terbatas. Jika Anda menginginkan untuk menggunakan icon lain dari provider luar, maka sebaiknya melakukan instalasi package baru salah satunya yaitu vue svg icon.
Vue svg icon adalah package yang memungkinkan programmer untuk menggunakan icon lain diluar icon bawaan dari vuetify. Proses untuk menginstall package hingga berhasil menerapkan icon yang diinginkan begitu mudah, Anda dapat mengikuti tutorial berikut ini untuk dapat menggunakan vue svg icon:

Instalasi dan Pengaturan

install package vue svg icon dengan command di bawah ini:

Berikutnya, download icon yang Anda inginkan dalam bentuk svg, Saya menggunakan icon yang diambil dari situs material design icon.

Setelah selesai download, masukkan file icon dalam format svg tersebut kedalam folder svg-icons didalam root dari project Anda, diluar folder src.
Vue-svgicon harus mengkonversi semua file icon berformat svg kedalam file js yang dapat diload nantinya. Maka dari itu, tambahkan npm script kedalam file package.json Anda seperti contoh di bawah ini:
Selanjutnya, jalankan command $ npm run generate-icons. command ini akan menghasilkan icon yang tercompile di src/compiled-icons/[icon-name].js.

Penggunaan 

Sekarang saatnya Anda menggunakan icon tadi di aplikasi, tambahkan plugin vue-svgicon kedalam file src/main.js Anda
Kemudian lakukan import di src/App.vue agar icon nantinya dapat dipanggil oleh komponen yang memerlukan
Terakhir, Anda dapat menggunakan icon tadi dengan memasukkan kode <svgicon> seperti contoh di bawah ini src/components/ContohHalaman.vue:

No comments:

Post a Comment