Mengonfigurasi Ikon Kustom

Spaceback UI menggunakan ikon SVG dengan tema Desain Material. Ada beberapa keuntungan untuk ikon SVG, termasuk skalabilitas, SEO friendly, kemampuan mengedit, dan resolusi independen. Oleh karena itu, masa depan SVG akan terlihat cerah dan tren penggunaan SVG akan terus meningkat.

Berikut adalah beberapa keuntungan menggunakan ikon SVG:

• Tidak akan kabur dan tidak akan pecah saat diperbesar.
• Tidak akan blur dan tidak pecah saat resolusi diperbesar.
• Kualitas gambar akan tetap terjaga.
• Dapat membuat pemuatan situs web lebih cepat.
• Cocok untuk desain responsif, karena kualitasnya tetap tajam di semua perangkat.

Cara Mendapatkan Ikon SVG

Ikuti langkah-langkah berikut:

Cara Memasang Ikon SVG di Blog

Setelah kode didapat, lalu bagaimana cara menggunakan icon SVG ini di Blog? Ikon SVG dapat diinstal menggunakan 3 metode. Anda dapat memilih salah satu dari 3 metode berikut:

Metode Instal Langsung Seperti HTML

Cara ini paling mudah karena yang harus Anda lakukan hanyalah menempelkan kode dari situs web ke dalam blog. Pastikan Anda memiliki kode ikon SVG (metode tepat di atas). Misalnya kodenya sebagai berikut:

1. Ini adalah contoh kode ikon SVG yang diperoleh sebelumnya:

   <svg style="width:24px;height:24px" viewBox="0 0 24 24">
       <path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
   </svg>

2. Setelah mendapatkan kode ikon SVG seperti di atas, simpan saja di tempat yang Anda inginkan.

Metode Instal HTML dan CSS Internal

Metode ini lebih baik dari yang pertama karena ada pengaturan CSS internal. Hapus kode style="width:24px;height:24px" dan fill="#000000". Kemudian tambahkan ini dalam kode CSS:

<svg viewBox="0 0 24 24">
    <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>

svg {width:24px; height:24px;}
svg path {fill:#000000;}

<div id="search"><svg blablabla></svg></div>

#search svg {width:24px; height:24px}
#search svg path {fill:#000000}

Metode Internal CSS

Jika Anda ingin langsung menggunakan ikon SVG di CSS. Misalnya sebagai gambar latar atau sebagai konten dari elemen semu :before atau :after. Misalnya seperti gambar di bawah ini:

#search {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='%23fff'/%3E%3C/svg%3E");
  background-color:#417D7A;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 24px 24px;
}