Cara menggunakan Icon SVG didalam blogger

Hello sobat Desain jika anda sebelum nya tidak pernah mendengar atau mengetahui mengenai Icon SVG atau juga font Awesome maka kali ini saya akan memberikan informasi nya kepada anda

Apa itu SVG

SVG merupakan singkatan dari Scalable Vector Graphics yang digunakan untuk menciptakan sebuah Icon dari atau melalui sebuah gambar ataupungrafis

Terkhusus bagi kamu pengguna Blogger, dengan kamu menggunakan icon SVG membuat dan membantu loading blog kamu semakin cepat

Biasanya Icon SVG ini sering digunakan oleh pengguna blogger untuk menambahkan Icon dalam Menu navigasi mereka

Font Awesome

Font Awesome (SVG) adalah suatu script kode pemanggil untuk memuat suatu elemen jika kita menyertakan kode perintah didalamnya

Jadi jika kamu memasang font Awesome untuk menampilkan SVG kamu harus menambahkan script kode dari font Awesome tersebut

Nah untuk bisa mendapatkan script awesome tersebut, kamu harus menggunakan Hosting atau situs web yang menyediakan font Awesome khusus SVG

Nantinya kamu akan diarahkan untuk menyimpan script font Awesome tersebut didalam Template kamu untuk kamu gunakan, barulah kamu bisa menggunakan setiap icon yang tersedia didalamnya

Berbeda antara kamu menggunakan Font Awesome dengan Menggunakan SVG (Tanpa font Awesome), terlihat sekali perbedaannya didalam kode penampil iconnya, baca sampai selesai untuk lebih memahami nya

Contoh kode Icon SVG

Berikut adalah contoh dari kode icon SVG, sebagai berikut :

<svg style='width:24px;height:24px' viewBox='0 0 24 24'><path fill="WarnaHTML" d='M21,2H3A2,2 0 0,0 1,4V20A2,2 0 0,0 3,22H21A2,2 0 0,0 23,20V4A2,2 0 0,0 21,2M11,17.5L9.5,19L5,14.5L9.5,10L11,11.5L8,14.5L11,17.5M14.5,19L13,17.5L16,14.5L13,11.5L14.5,10L19,14.5L14.5,19M21,7H3V4H21V7Z'/></svg>

Icon SVG biasanya diawali dengan kode <svg dan sebagai kode </svg> penutupnya

Ubah ukuran Icon

Untuk mengubah ukuran Icon SVGmudah sekali sobat desain, kamu hanya perlu mengatur didalam Tag width:24px dan Tag height:24px ubah ukuran menurut keinginan kamu ya 🌞

Ubah ukuran dengan CSS

Nah sobat desain juga bisa mengatur ukuran Icon SVG nya dengan menambahkan kode CSS seperti contoh dibawah ini :

.DL svg {

   width:24px;

   height:24px;

}

Ganti Warna Icon

Untuk mengganti warna defeult icon SVG nya, kamu bisa melihat Tag fill="WarnaHTML" dan kemudian berikan warna sesuai keinginan kamu dalam format warna HTML

Ganti warna dengan CSS

Mengganti atau mengatur warna Icon SVG nya kamu bisa menambahkan kode CSS seperti contoh Berikut ini

.DL svg path {

   fill: white;

}