Membuat Icon Component Di Vue JS

Bekerja dengan gambar dan ikon adalah salah satu bagian dari pekerjaan pengembang Front-end. Dan dalam banyak kasus saat Anda mengembangkan proyek, Anda harus menggunakan gaya yang sama untuk semua ikon di situs web.

Salah satu solusinya adalah membuat tag IMG dan meneruskan file SVG Anda ke src. Itu bisa berhasil. Tetapi bagaimana jika Anda harus menggunakan ikon yang sama berkali-kali dalam proyek Anda dan bahkan dalam warna yang berbeda? Dalam hal ini, Anda harus memiliki strategi lain.

Berkas SVG

Seperti yang Anda ketahui, gambar SVG adalah gambar yang dapat dimodifikasi sesuai keinginan kita dan sangat fleksibel. Artinya, Anda dapat dengan mudah mengubah ukuran atau warnanya.

Mari kita ambil contoh "Ikon Tutup" sederhana, dua garis bersilangan.

Pertama, Anda harus mengunduh gambar di laptop Anda dan membukanya di browser.

Kami pergi ke DevTools dan di bagian Elemen, kami menyalin kontennya.

Membuat Komponen Ikon Vue

Dan sekarang, mari kembali ke Vue dan membuat komponen ikon baru yang dapat digunakan kembali.

Kita dapat menamainya "CloseIcon.vue".

Sekarang, kami meneruskan semua yang telah kami salin dari browser ke dalam template komponen.

<template>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
<path d="M18 6L6 18" stroke="#007A72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 6L18 18" stroke="#007A72" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>

Baik, ini akan berhasil tetapi kita masih bisa membuatnya lebih baik. Misalnya dengan mengubah warna dan ukuran alat peraga.

Ukuran khusus

Artinya, alih-alih mengetik lebar dan tinggi, kita akan menggunakan prop dinamis untuk itu.

:width="size + 'em'" 
:height="size + 'em'"

Warna Custom

Untuk membuat ikon SVG Anda memiliki warna yang dinamis, Anda bahkan tidak perlu melewati alat peraga apa pun. Akan lebih baik jika Anda menggunakan “currentColor” daripada mengetik warna itu sendiri.

Saat menggunakan "currentColor", komponen akan mengadopsi warna induk atau warna apa pun yang ingin Anda atur dari luar cakupan.

stroke="currentColor"

Kode Terakhir

Dan ikon kita yang dapat digunakan kembali sudah siap! 👏 Sekarang Anda dapat dengan mudah menyesuaikannya dengan kebutuhan Anda dan menggunakannya di proyek Anda.

<template>
<svg :width="size + 'em'" :height="size + 'em'" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
<path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</template>
<script>
export default {
name: "CloseIcon",
props: {
   size: {
     type: [Number, String],
     default: '1'
   },
},
}
</script>

Penggunaan global

Jika Anda ingin menggunakannya secara global, Anda juga dapat mengimpornya ke file app.js dan dapat diakses dari mana saja di proyek Anda.

import CloseIcon from './components/icons/CloseIcon.vue';
Vue.component('close-icon', CloseIcon)