SVG Icon Sebagai Pengganti Font Awesome

SVG Icon Sebagai Pengganti Font Awesome
Dagruel

SVG icon atau Scalable Vector Graphic. Merupakan bahasa markup yang sanggup menampilkan icon atau gambar dan udah support di semua browser.

Berbeda dengan Font Awesome yang harus memanggil script dahulu. SVG icon hanya perlu ditulis seperti HTML/CSS, cara nya pun cukup mudah seperti dibawah.

Cara menggunakan SVG Icon

Pertama untuk mendapatkan SVG icon kunjungi webside https://materialdesignicons.com. Disana ada berbagai icon yang akan kalian ambil kodenya untuk disimpan keblog.

Kedua pilih salah satu icon, lalu klik icon </> pilih "View SVG", maka kode nya akan menampilkan icon nya akan muncul.

Material Icons Design
Dagruel

Ada tiga cara menggunakan SVG icon, jadi silahkan pilih salah satu cara dibawah yang cocok untuk kalian.

Material Icons Design 1
Dagruel

1. Langsung Copy Paste kode nya

Cara yang paling mudah, kalian hanya perlu salin semua kode seperti gambar diatas dan tempelkan dimana kalian mau. Contoh kode nya.

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#ffffff" d="M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z" />
</svg>
ganti kode yang ditandai sesuai keinginan kalian.
  • width:24px;height:24px: Lebar Tinggi Icon
  • #ffffff: Warna Icon

2. Pasang HTML + Internal CSS

Pada kode sebelum nya hapus style="width:24px;height:24px" dan fill="#ffffff", lalu tambahkan CSS nya di dalam tag <style> cssnya </style>

<svg viewBox="0 0 24 24">
    <path d="M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z" />
</svg>
svg {
width: 24px;
height: 24px;
}
svg path {
fill: #000000;
}
Penting: Harap pehatikan tempat menyimpan kodenya. Jika masih di dalam ruang lingkup turunan elemen lain, maka tambahkan kode CSSnya. Misalnya disimpan di dalam ruang lingkup seperti html dibawah.
<div id="title">
  <svg viewBox="0 0 24 24">
    <path d="M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z" />
  </svg>
</div>
Maka CSS nya harus seperti ini
#title svg {
width: 24px;
height: 24px;
}
#title svg path {
fill: #000000;
}

3. Hanya Internal CSS

Ini kalau kamu mau langsung pake SVG di CSS. Misalnya sebagai background image atau sebagai konten dari pseudo-element :before atau :after.

#title:before {
content: '';
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='KodeUnik' fill='WarnaIcon'/%3E%3C/svg%3E");
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
background-size: 45px 45px;
}
Pada bagian background-image kalian ganti KodeUnik dan WarnaIcon
  • KodeUnik: kode yang ditandai pada gambar diatas, contoh "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z".
  • WarnaIcon: misal #fff maka penulisannya %23fff, tanda # diganti %23

Ini wajib agar pengaturan internal CSS bisa diterima dan akan tampil di semua browser. Kalau nggak diganti, biasanya nggak bakal muncul.

Memang keliatan agak ribet dibanding Font Awesome yang memanggil kode lebih sedikit. Tapi dijamin ampuh buat mempercepat page speed.

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://www.igniel.com

Comments