Cara Memasang Icon SVG Untuk Mempercepat Loading Blog

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial menarik tentang bagaimana Cara Memasang Icon SVG Untuk Mempercepat Loading Blog, sebelum kita membahas lebih jauh saya ingin memberikan sebuah informasi mengenai svg tersebut. SVG merupakan kepanjangan dari Scalable Vector Graphics, (SVG) Adalah format gambar yang menggunakan XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi.


Jika kamu melihat, biasanya teman-teman web menggunakan Font Awesome atau img yang dihosting untuk menggunakan sebuah icon. Namun hal tersebut justru menambah beban template / website ketika dimuat. Akibatnya halaman akan menjadi tambah lama sampai terlihat semuanya.

Cara Memasang Icon SVG Untuk Mempercepat Loading Blog

1. Silahkan kamu kunjungi website berikut ini, dimana kamu bisa memilih berbagai jenis icon svg yang bisa kamu ambil kode tersebut.

https://materialdesignicons.com


2. Selanjutnya, kamu pilih salah satu icon tersebut, lalu klik icon </> pilih "View SVG", Kemudian kode untuk icon tersebut bakal muncul.


3. Selanjutnya nanti bakal muncul kode SVG nya dan silahkan kamu copy kode svg tersebut untuk nanti kamu pasang di blog kamu.

<svg style="height: 24px; width: 24px;" viewbox="0 0 24 24">
    <path fill="#000000" d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" fill="#000000">
</path></svg>

4. Tinggal kamu simpan deh kode itu dimana pun kamu mau, jangan lupa kamu ganti tulisan yang di highlight sesuai dengan keinginan kamu masing-masing dan ukurannya.

a. width:24px;height:24px; adalah Lebar dan tinggi icon.
b. #000000 adalah warna icon svg tersebut.

5. Kalau sudah silahkan kamu SIMPAN dan Selasai.

Bagaimana mudah bukan untuk tutorial Cara Memasang Icon SVG Untuk Mempercepat Loading Blog, apabila kamu memiliki kendala atau masalah mengenai blogger silahkan komen di kolom komentar dibawah artikel ini.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online saja.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    4 Komentar

    1. Balasan
      1. Siap om, terima kasih sudah berkunjung di Jagoandzgn

        Hapus
    2. Min, gimana caranya masuk ke situs materialdesignicon-nya.

      Saya sudah kunjungi, tapi yang ada hanya tulisan seperti ini:

      Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
      Sponsored by Webalys - Nova Icons.

      Apa karena situsnya sudah ga ada?

      BalasHapus
      Balasan
      1. Bukan gak ada kak, di tunggu aja itu masih loading saya pun juga gitu pertamanya, Terima kasih sudah berkunjung di Jagoandzgn

        Hapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel