Beranda

svg icon image

alt_here

Koleksi ikon SVG untuk Anda, sehingga Anda dapat menggunakannya saat membuat perubahan pada tema atau Anda dapat menggunakannya di Postingan Blog.

Halaman ini menyediakan kumpulan icon SVG yang dapat digunakan untuk mempercantik tampilan blog. SVG memiliki keunggulan karena ringan, scalable, dan tetap tajam di berbagai ukuran layar.

Cara Menggunakan Icon SVG di Blogger

Icon SVG bisa digunakan dengan dua cara, yaitu langsung di dalam HTML atau melalui tag img. Kelebihan SVG adalah ukurannya ringan, tidak pecah saat diperbesar, dan mudah dikustomisasi menggunakan CSS seperti warna, ukuran, dan efek hover.

1. Menggunakan tag IMG (cara paling mudah)

Cara ini cocok untuk pemula karena cukup memanggil file SVG seperti gambar biasa:


<img src="icon.svg" alt="Icon Contoh" width="24" height="24">

2. Menggunakan SVG inline (lebih fleksibel)

Metode ini memungkinkan kamu mengubah warna langsung dengan CSS:


<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>

Contoh penggunaan CSS


svg {
  color: #ff5722;
  transition: 0.3s;
}

svg:hover {
  color: #2196f3;
}

Kesimpulan: Jika kamu ingin cara cepat gunakan img, tetapi jika ingin desain lebih fleksibel dan modern, gunakan SVG inline.

Contoh Penggunaan

Icon SVG bisa digunakan untuk menu navigasi, tombol download, atau ikon sosial media agar tampilan blog lebih profesional.

Posting Komentar