Mengonfigurasi Ikon Kustom
Konfigurasikan ikon kustom di Gila Material PRO.
Ishar Yulian Satriani
---
Gila Material Pro 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.
Daftar Isi
Cara Mendapatkan Ikon SVG
Ikuti langkah-langkah berikut.
Anda harus mengunjungi situs web Iconer. Di sana Anda dapat memilih berbagai jenis ikon SVG, yang akan dikodekan untuk digunakan.
Pilih salah satu dari menu ikon yang tersedia, misal pilih menu ikon dari Feather Icons.
Klik Open in App.
Pada bagian Sidebar kanan atur opsi nilai untuk Stroke Width menjadi 1.
Cari ikon SVG sesuai kebutuhan Anda, lalu klik ikon SVG nanti kodenya akan tersalin otomatis. Contoh seperti kode ikon Download di bawah ini.
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
<path d="M12 15V3"></path>
</svg>
Ambil bagian
path nya aja, contoh seperti di bawah ini.
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
<path d="M12 15V3"></path>Cara Memasang Ikon SVG
Ikuti langkah-langkah berikut.
Masuk ke Dashboard Blogger > pilih menu Tata Letak.
Cari bagian yang berjudul GMP PANEL.
Klik tombol edit (ikon pensil) di Custom SVG Icons (Gadget Daftar).
Akan muncul pop up konfigurasi Widget.
Pada kolom Judul biarkan default.
Pada kolom Jumlah item yang tampil di daftar biarkan kosong.
Pada kolom Pengurutan biarkan default.
Pada bagian Daftar Teks, klik tombol TAMBAHKAN ITEM BARU.
Pada kolom Teks, isikan dengan format seperti contoh di bawah ini.
<symbol id='Download' viewbox='0 0 24 24'>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
<path d="M12 15V3"></path>
</symbol>- Pada bagian
id='Download'ganti teks Download dengan nama Label. - Pada bagian kode
pathganti dengan kode path yang diambil dari langkah sebelumnya.
Jika sudah dikonfigurasi klik tombol SIMPAN di sebelah kanan.
Jika semua sudah dikonfigurasi, klik tombol SIMPAN di bawah.
Jika Anda ingin melaporkan beberapa bug, Anda dapat menulisnya di bagian komentar halaman Laporkan Bug dan jika Anda ingin meminta fitur baru atau ingin memberikan umpan balik, silakan tulis di bagian komentar di halaman Request dan Feedback.
Posting Komentar
Posting Komentar