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:
Anda harus mengunjungi situs web Material Design Icons. Di sana Anda dapat memilih berbagai jenis ikon SVG, yang akan dikodekan untuk digunakan.
Pilih salah satu, lalu klik ikon </>
, pilih View SVG. Kemudian akan muncul kotak yang berisi kode tersebut.
Salin kodenya.
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:
- 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>
- Setelah mendapatkan kode ikon SVG seperti di atas, simpan saja di tempat yang Anda inginkan.
width:24px;height:24px
Ikon SVG juga dapat diubah warnanya di
#000000
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
yang memiliki id search
seperti di bawah ini:
<div id="search"><svg blablabla></svg></div>
Maka CSS harus seperti ini:
#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;
}
background-image
property section In the %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
replace with the SVG icon code of your choice.
Perlu diketahui bahwa jika Anda ingin menggunakan metode ini Anda harus mengubah simbol HTML seperti contoh di bawah ini:
<
symbol is changed to%3C
>
symbol changed to%3E
#
symbol changed to%23
-
Admin RedaksitestBalas