Gini cuy, kemarin sepertinya ada yang bertanya mengenai icon blog ini yang berwarna.
Sebenarnya hal ini tidak berpengaruh terhadap performa website atau blog kamu, yaa hitung hitung cuma sebagai pemercantik tampilan saja.
Untuk itu, kali ini kita bahas bagaimana cara menambahkan atau memberi warna pada icon svg di blog kamu.
Sebenarnya sih, caranya cukup mudah. Mungkin bisa dibilang sangat mudah. Selengkapnya lanjut scroll kebawah.
1. Mendapatkan svg icon
Disini yang saya maksud adalah icon inline svg html.
Dari materialdesignicons.com
Jika template blog kamu tidak ada instruksi bawaan mengenai icon svg yang siap pakai, maka kamu bisa menggunakan icon yang dapat kamu dapatkan dari https://materialdesignicons.com.
Disini kamu hanya perlu memilih icon yang cocok, kemudian tinggal klik saja. Kemudian pilih view svg.
Yang terahir, kamu tinggal copy bagian inline SVG for HTML.
Dari source code file icon .svg
Semua icon file berekstensi .svg bisa kamu lihat dari raw source codenya untuk dipasang sebagai icon html.
Misal disini saya download icon dari feathericons.com. Dan ketika melihat source code filenya tinggal kita copy saja.
Jika masih bingung, kalian bisa membuka file svg di browser. Kemudian klik ctrl + u untuk melihat source codenya.
Kalo lu dapet icon darimana bang?
Kalo saya atau blog ini memakai icon dari Iconly v2.3 (Curved). Lebih tepatnya mengambil dari dokumentasi template ini di docs.jagodesain.com/2021/02/svg-icon.html.
2. Memberi warna pada icon
Sebagai contoh, disini saya akan memakai icon bintang dengan kode svg :
<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(3.000000, 3.000000)'><path d='M9,0 C6.96384545,0 6.77134103,3.54652262 5.55911318,4.79957421 C4.34688533,6.05262581 0.578198764,4.61991709 0.0545867365,6.84402682 C-0.467925266,9.06927362 2.92235261,9.82428837 3.34036221,11.7334296 C3.76057187,13.6425708 1.68922429,16.3249199 3.45916494,17.6598406 C5.2291056,18.9936242 7.13434937,15.9747022 9,15.9747022 C10.8656351,15.9747022 12.7708788,18.9936242 14.5408195,17.6598406 C16.3107602,16.3249199 14.2405126,13.6425708 14.6596222,11.7334296 C15.0787319,9.82428837 18.4679097,9.06927362 17.9453977,6.84402682 C17.4228857,4.61991709 13.6530991,6.05262581 12.4419713,4.79957421 C11.2297434,3.54652262 11.036139,0 9,0 Z'></path></g></svg>
Dengan tampilan icon seperti ini
Langkah 1 : Pertama, kalian copy konten mulai dari <path> sampai </path> atau singkatnya pada bagian yang saya tandai, ke tepat dibawahnya. Sehingga nanti ada 2 <path> yang kurang lebih seperti berikut:
<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(3.000000, 3.000000)'> <path d='M9,0 C6.96384545,0 6.77134103,3.54652262 5.55911318,4.79957421 C4.34688533,6.05262581 0.578198764,4.61991709 0.0545867365,6.84402682 C-0.467925266,9.06927362 2.92235261,9.82428837 3.34036221,11.7334296 C3.76057187,13.6425708 1.68922429,16.3249199 3.45916494,17.6598406 C5.2291056,18.9936242 7.13434937,15.9747022 9,15.9747022 C10.8656351,15.9747022 12.7708788,18.9936242 14.5408195,17.6598406 C16.3107602,16.3249199 14.2405126,13.6425708 14.6596222,11.7334296 C15.0787319,9.82428837 18.4679097,9.06927362 17.9453977,6.84402682 C17.4228857,4.61991709 13.6530991,6.05262581 12.4419713,4.79957421 C11.2297434,3.54652262 11.036139,0 9,0 Z'></path> <path d='M9,0 C6.96384545,0 6.77134103,3.54652262 5.55911318,4.79957421 C4.34688533,6.05262581 0.578198764,4.61991709 0.0545867365,6.84402682 C-0.467925266,9.06927362 2.92235261,9.82428837 3.34036221,11.7334296 C3.76057187,13.6425708 1.68922429,16.3249199 3.45916494,17.6598406 C5.2291056,18.9936242 7.13434937,15.9747022 9,15.9747022 C10.8656351,15.9747022 12.7708788,18.9936242 14.5408195,17.6598406 C16.3107602,16.3249199 14.2405126,13.6425708 14.6596222,11.7334296 C15.0787319,9.82428837 18.4679097,9.06927362 17.9453977,6.84402682 C17.4228857,4.61991709 13.6530991,6.05262581 12.4419713,4.79957421 C11.2297434,3.54652262 11.036139,0 9,0 Z'></path> </g></svg>
Langkah 2 : Untuk memberi warna kalian tambahkan kode dibawah ini pada path pertama. Kalian juga bisa mengganti warnanya dengan kode hex color pada bagian yang saya dandai.
style='fill: #ff1a94;stroke: none;'
Sehingga kurang lebih menjadi seperti berikut:
<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(3.000000, 3.000000)'> <path d='M9,0 C6.96384545,0 6.77134103,3.54652262 5.55911318,4.79957421 C4.34688533,6.05262581 0.578198764,4.61991709 0.0545867365,6.84402682 C-0.467925266,9.06927362 2.92235261,9.82428837 3.34036221,11.7334296 C3.76057187,13.6425708 1.68922429,16.3249199 3.45916494,17.6598406 C5.2291056,18.9936242 7.13434937,15.9747022 9,15.9747022 C10.8656351,15.9747022 12.7708788,18.9936242 14.5408195,17.6598406 C16.3107602,16.3249199 14.2405126,13.6425708 14.6596222,11.7334296 C15.0787319,9.82428837 18.4679097,9.06927362 17.9453977,6.84402682 C17.4228857,4.61991709 13.6530991,6.05262581 12.4419713,4.79957421 C11.2297434,3.54652262 11.036139,0 9,0 Z' style='fill: #ff1a94;stroke: none;'></path> <path d='M9,0 C6.96384545,0 6.77134103,3.54652262 5.55911318,4.79957421 C4.34688533,6.05262581 0.578198764,4.61991709 0.0545867365,6.84402682 C-0.467925266,9.06927362 2.92235261,9.82428837 3.34036221,11.7334296 C3.76057187,13.6425708 1.68922429,16.3249199 3.45916494,17.6598406 C5.2291056,18.9936242 7.13434937,15.9747022 9,15.9747022 C10.8656351,15.9747022 12.7708788,18.9936242 14.5408195,17.6598406 C16.3107602,16.3249199 14.2405126,13.6425708 14.6596222,11.7334296 C15.0787319,9.82428837 18.4679097,9.06927362 17.9453977,6.84402682 C17.4228857,4.61991709 13.6530991,6.05262581 12.4419713,4.79957421 C11.2297434,3.54652262 11.036139,0 9,0 Z'></path> </g></svg>
Dan kurang lebih seperti inilah tampilan iconnya bila sudah menerapkan tutorial diatas:
Btw, pemberian warna pada icon svg ini dilakukan secara manual pada masing masing icon. Jadi jika ada icon yang tidak terlalu penting untuk ditampilkan dengan warna, sebaiknya biarkan saja wkwkw.
Saya tekankan sekali lagi, pemberian warna pada icon ini tidak membuat website kamu jadi lambat, lemot, ataupun memakan waktu loading yang lama, sehingga aman untuk digunakan.
Sekian, cara Memberi Warna Pada Icon SVG di Blogger. Semoga bermanfaat.