Cara Menerapkan Icon SVG Inline CSS-HTML
Membuat Icon SVG Sendiri Part 2
Setiap milidetik dalam waktu loading website sangat berarti. Banyak developer dan desainer mengandalkan pustaka ikon eksternal untuk mempercantik tampilan, namun tahukah kamu ada cara yang jauh lebih powerful dan efisien? Kamu bisa membuat dan menerapkan ikon SVG buatan sendiri. Ini bukan sekadar soal estetika, ini adalah langkah cerdas untuk meningkatkan performa website secara signifikan.
Lupakan ketergantungan pada pustaka ikon yang berat. Dengan SVG buatan sendiri, kamu bisa merasakan manfaatnya langsung. Kenapa kode SVG + CSS ini lebih baik?
Tanpa Ketergantungan Eksternal
Kamu tidak perlu lagi memuat font atau stylesheet dari server lain. Semua kode ikon langsung tertanam di dalam website-mu. Ini membuat loading website jauh lebih cepat dan menghilangkan risiko masalah jaringan atau server down yang bisa merusak tampilan.
Lebih Ringkas
Pustaka ikon eksternal sering kali berisi ribuan ikon yang tidak kamu butuhkan. Dengan SVG, kamu hanya memuat kode ikon yang benar-benar kamu gunakan. Ukurannya super kecil, sehingga website-mu terasa ringan dan responsif.
Aksesibilitas Lebih Baik
Ikon buatan sendiri memberikan kontrol penuh atas aksesibilitas. Dengan menerapkan aria-label yang tepat, kamu bisa memastikan ikonmu ramah bagi pengguna dengan pembaca layar (screen reader). Hal ini menciptakan pengalaman yang inklusif untuk semua orang.
Bagaimana cara menerapkannya? Cukup buat satu class CSS sebagai "root" atau "parent" untuk mengontrol semua ikonmu. Contohnya, kamu bisa meletakkan kode CSS ini di bagian <style> pada blog kamu:
.MyIcon-23p {
display: inline-block;
width: 23px;
height: 23px;
fill: currentColor;
}Kemudian, cukup panggil class ini pada setiap kode SVG di HTML. Dengan cara ini, kamu bisa mengubah ukuran semua ikon dalam sekejap hanya dengan mengedit satu baris kode. Berikut adalah contoh penerapannya:
<a aria-label="Tombol Berlangganan" class="MyIcon-23p" href="https://www.blogger.com/follow-blog.g?blogID=2422643333095333366" rel="noopener noreferrer" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 300">
<path d="M150.03 10c-10.21,0 -18.47,8.25 -18.47,18.47l0 1.79c71.11,-7.87 95.2,59.05 86.23,119.62 1.74,-57.41 -25.14,-115.35 -89.2,-118.91 -40.64,9.66 -70.89,46.22 -70.89,89.82l0 12.52c0,27.76 -9.46,54.71 -26.78,76.41l-5.65 7.04c-2.95,3.63 -4.5,8.13 -4.5,12.81 0,11.31 9.18,20.48 20.49,20.48l217.48 0c11.31,0 20.49,-9.17 20.49,-20.48 0,-4.68 -1.56,-9.18 -4.5,-12.81l-5.65 -7.04c-17.26,-21.7 -26.72,-48.65 -26.72,-76.41l0 -12.52c0,-44.66 -31.74,-81.94 -73.86,-90.48l0 -1.85c0,-10.21 -8.26,-18.46 -18.47,-18.46l0 0zm-35.78 252.3c4.1,15.93 18.58,27.7 35.78,27.7 17.2,0 31.68,-11.77 35.77,-27.7l-71.55 0z"/>
</path></svg>
</a>Kesimpulan
Menerapkan ikon SVG buatan sendiri bukan hanya soal desain, ini adalah strategi optimasi website yang solid. Kamu punya kontrol penuh, performa terbaik, dan aksesibilitas yang unggul. Jadi, tunggu apa lagi? Saatnya beralih ke SVG buatan sendiri dan rasakan perbedaannya. Kontrol website-mu ada di tanganmu.