√ Cara Menambahkan Icon SVG Baru Pada Template Median UI dan Menerapkannya pada Menu Navigasi

Template Blog Tema Median UI secara default Menggunakan ikon jenis <svg>, ini bagus karena tidak membebani template. Kelemahannya adalah sulit untuk menambahkan ikon baru, saya yakin tidak semua orang pandai membuat ikon svg.

Sebelum kita lanjut ke pembahasan lebih lanjut, mari kita kenalan dulu dengan icon svg.

Daftar isi materi

Apa itu ikon svg?

Singkatnya, ikon svg adalah gambar dengan ekstensi .svg yang dirancang khusus untuk kebutuhan situs, svg dibuat menggunakan kode program.

Manfaat menggunakan ikon svg untuk kebutuhan situs?

Ada banyak manfaat menggunakan svg ini sebagai ikon untuk keperluan disebuah situs, seperti yang saya katakan tidak membebani situs atau template dan svg ini tidak pudar atau pecah terlepas dari ukurannya

Bagaimana cara menambahkan ikon svg baru?

Cara ini saya ambil dari berbagai sumber di internet, ada dua cara yang bisa saya jelaskan, di antaranya:

• Mengambil ikon svg dari docs.
• Mengambil ikon svg dari dari penyedia situs ikon svg.

Lebih detail akan saya jelaskan pada tutorial di bawah ini, cara mendapatkan kode bagaimana mendapatkan ikon svg dari dokumen

Karena template UI media ini adalah template berbayar, sebenarnya ada situs khusus untuk dokumen yang sengaja dibuat oleh Sang Pencipta. Untuk mendapatkan kode ikon svg dari dokumen, ikuti langkah-langkah berikut.

• Silakan akses tautan berikut Kunjungi Linkdocs.jagodesign.com/svg-icon.html
• Dari situs tersebut, silakan pilih ikon svg yang Anda inginkan. Jika pilihan dibuat, silakan Salinan Kode svgnya, misalnya

<svg class='line' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>

Mengambil svg icon dari Web penyedia icon svg 

Biasanya file icon svg yang disajikan di situs penyedia icon svg, bukan kodenya, jadi disini saya akan menjelaskan cara mendapatkan kodenya.

1. Buka ikon svg situs penyedia Jika anda bingung silahkan cari di google untuk kata kunci "svg icon free download" Misalnya Kunjungi linkhttps://freeicons.io/
2. Unduh file ikon svg
3. Jika diunduh, silakan ubah nama ekstensi dari .svg / .txt
4. Kemudian buka menggunakan notepad.

Menerapkan ikon svg ke menu navigasi

Saya juga akan menjelaskan cara menambahkan ikon svg yang sudah di download sebelumnya ke menu navigasi.

1. Silakan buka dasbor Blogger Anda
2. Klik menunya Tema Dan tekan panah bawah. Di sebelah tombol "Sesuaikan" 

3. Pilih edit html

4. Tekan pada keyboard Ctrl + F. Untuk membuka papan pencarian

5. Cari kode <!--[ SVG Icon ]-->

6. Terapkan kode ini di bawahnya dan ikuti instruksi di bawah ini.

<b:includable id='Nama id'>
        <!--[ Nama icon ]-->
        // Simpan kode svg di sini
</b:includable>

// Contoh

<b:includable id='back-icon'>
        <!--[ Back icon ]-->
        <svg class='line' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</b:includable>

Untuk mendapatkan ikon SVG Ssilahkan cari di https://docs.jagodesain.com/2021/02/svg-icon.html.

6. Terapkan kode berikut di bawah kode <!--[ Icon ]-->  Jangan lupa ganti tandanya Mungkin kode seperti ini banyak sekali, silahkan sesuaikan link yang ingin di terapkan iconnya.

<b:include name='nama id yang sudah di terapkan pada icon sebelumnya'/>

// Contoh

<b:include name='back-icon'/>

7. Klik Ikon Simpan, jika selesai di tambahkan.

Demikianlah Cara membuat icon svg baru dan cara mengaplikasikannya di menu navigasi, jika ada kendala atau bingung jangan sungkan tulis di kolom komentar.

Baca Juga