CSS - mengatur gaya ikon SVG - Blogger Otodidak

CSS ikon SVG

Postingan terkait : Ikon SVG vs Loading Blog

Contoh penggunaan ikon SVG.

Untuk mendapatkan pilihan ikon, bisa akses langsung website penyedia ikon svg semisal:
Material Design Icons.com/ atau Font Awesome v6, Lalu pilih dan klik ikon yang dinginkan.

Untuk SVG dari MDI (Material Design Icons) sudah terdapat style dalam tag <svg> dan juga tag <path>-nya.
Lihat screenshot dibawah ini untuk lebih jelasnya.

Style yang terdapat pada SVG dari MDI.

Keterangan gambar

Untuk mengubah gayanya, hapus kode yang berada dalam kotak kuning dan biru.

Kotak kuning: style ="width:24px;height:24px; (mengatur ukuran panjang dan lebar ikon)
Kotak biru: fill ="currentColor" (currentColor berarti mengikuti warna saat ini atau mengikuti CSS color yang diterapkan pada elemen yang ditumpangi svg tersebut.)

Contoh ikon SVG

Dibawah ini menggunakan ikon SVG dari MDI (Material Design Icons)
Ikon SVG Twitch :

Ikon SVG Store :

Ikon SVG Alert :

Perhatikan kembali setiap kode pada penulisan tag ikon svg diatas, pada tag <svg> terdapat :
style='width:24px;height:24px' yang mengatur ukuran dimensi (besar / kecil) ikon SVG. Sedangkan untuk viewBox adalah atribut SVG yang menentukan dimensi sekaligus posisi ikon tersebut.

Untuk atribut viewBox disarankan untuk membiarkan saja apa adanya. Jika ingin mengubah ukuran, ganti value untuk width:value dan height:value sesuai yang diinginkan. Lihat contoh dibawah.

Mengubah ukuran (dimensi) ikon SVG.

Jika ingin mengatur dimensi ikon menggunakan SVG, hapus dahulu style='width:24px;height:24px' yang terdapat pada tag svg. Lalu buat perintah melalui CSS seperti dibawah ini.

Tampilan ikon SVG menggunakan css svg {width: 50px; height: 50px}

Twitch
Toko
Peringatan !!!

Tampilan ikon SVG tanpa CSS

Twitch
Toko
Peringatan !!!

Mengatur ikon SVG sejajar dengan teks.

Pada contoh diatas terlihat bahwa posisi ikon lebih tinggi dari teks. Untuk mengatasi hal ini bisa menggunakan style atau css dengan properti css vertical-align

svg {vertical-align: text-bottom;}

Tampilan setelah menggunakan vertical-align :

Twitch
Toko
Peringatan !!!

Isi (value) untuk vertical-align ada beberapa pilihan, apabila menggunakan value seperti pada contoh diatas ternyata posisi masih belum sejajar dengan teks, bisa dicoba mengganti value dengan:

top
middle
bottom
text-top
text-bottom
sub
super
% (sama dengan line-height)
px (menggunakan ukuran dengan satuan px)

Mengganti warna ikon SVG

Tidak seperti ikon lainnya, khusus ikon dengan format SVG warnanya bisa diatur sesuai keinginan.

Untuk mengatur warna ikon SVG gunakan perintah properti atau css fill

Contoh menggunakan perintah properti langsung dalam tag <path/> svg

<svg><path fill:warna d=.../></svg>

Contoh menggunakan CSS

svg {fill: warna}

Contoh SVG setelah diberikan warna:

Twitch
Toko
Peringatan !!!

Menampilkan ikon SVG dengan background warna.

Berikut ini penambahan background warna pada ikon SVG tanpa penyesuaian apapun (hanya menambahkan background saja).

svg {background: yellow}

Twitch
Toko
Peringatan !!!

Untuk mengatur agar tampilan lebih rapi adalah dengan mengatur lebar background dengan menambahkan padding.

CSS : svg {padding: 10px} atau style style='padding: 10px;'
Agar diketahui bahwa penambahan padding pada ikon SVG sama dengan menekan ukuran / dimensi ikon SVG, sehingga pada saat menambahkan padding, lakukan perubahan juga pada ukuran dimensi pada ikon.

Tampilan ikon SVG setelah penambahan padding:10px sebelum mengubah ukuran dimensi ikon.

Twitch
Toko
Peringatan !!!

Tampilan ikon SVG setelah penyesuain dimensi terhadap padding : style='width:40px;height;40px;padding:10px'

Terlihat setelah penyesuaian dimensi ikon maka posisi teks juga mengalami perubahan.

Twitch
Toko
Peringatan !!!

Pada posisi ini untuk kembali menyejajarkan teks dibutuhkan penyesuaian value pada vertical-align menjadi vertical-align: middle

Twitch
Toko
Peringatan !!!

Twitch
Toko
Peringatan !!!