Cara Mudah Membuat Icon SVG Sendiri
Membuat Icon SVG Sendiri Part 1
Ada yang baru nongol di footer saya. Bukan efek hujan salju atau animasi scroll, tapi satu upaya strategis menuju interface blog yang lebih ringan, dinamis, dan 100% pakai icon buatan sendiri.
Selama bertahun-tahun, Font Awesome jadi andalan banyak web. Tapi makin ke sini, makin kerasa juga bebannya, terutama buat interface saya blog ini. Gede file-nya, banyak CSS nganggur, dan yang paling nyesek: kadang cuma pakai 3 icon, tapi harus download satu library lengkap.
Jadi... misi rahasia dimulai. Saya mulai dari membuat satu logo vector untuk proyek icon SVG pribadi: saya beri nama PCThreadicon. Target pertamanya: buat ganti icon Font Awesome (icon medsos dan youtube) yang nongkrong di bagian footer. Dengan harapan icon custom ini bisa tampil presisi (kayak slogan pak polisi :D), elegan, responsif, dan tetap selaras sama interface blog saya.
Software yang saya pakai? Simple aja: CorelDRAW buat desain vektornya. Tapi kalau Kamu bukan tim Corel, tenang aja. Bisa juga pakai:
- Figma (web-based, powerfull banget)
- Inkscape (open source, mirip Corel)
- Adobe Illustrator (ya... kalau Kamu sultan)
Setelah desain beres, saya ekspor ke SVG, terus mampir dulu ke SVGOMG. Tools ini ngebantu banget buat bersihin file SVG — buang atribut nggak penting, ngecilin ukuran, pokoknya biar siap tempur di web.
Lanjut, file SVG yang udah clean saya upload ke GitHub Pages, tepatnya di repo khusus: annoercom.github.io/pcthread/. Di situ, semua icon buatan saya rencananya bakalan parkir, dan siap dipanggil kapan pun saya mau lewat URL langsung.
Ini contoh potongan CSS yang saya pakai buat icon custom tadi:
.footer-widget .pcthread-icon i {
background-image: url("https://annoercom.github.io/pcthread/pcthreadicon.svg");
background-position: center;
background-size: contain;
transition: transform 0.2s ease;
}
.footer-widget .pcthread-icon:hover i {
transform: scale(1.1);
}Dan hasilnya? Boom. Si icon SVG tampil setara — bahkan lebih tajam dibanding Font Awesome (hahaha over dikit). Gak butuh library tambahan. Gak ada kelas .fa. Cuma clean SVG, terintegrasi sempurna.
Yang bikin tambah keren, karena ini SVG, skalanya fleksibel. Kamu bisa atur sesuka hati tanpa takut blur atau pecah. Udah gitu, animasi hover juga tetap jalan mulus.
Ternyata, setelah semua beres dan icon tampil cantik di footer, ada efek domino keren: satu per satu icon FA saya ganti, dan akhirnya... seluruh struktur `FA` di footer hilang total. Gantinya? Icon buatan sendiri, full kontrol di tangan kita.
Langkah selanjutnya bersih-bersih struktur element SVG FA yang tidak digunakan. Kemudian kita hapus link Font Awesome dari `head` HTML... Tapi nanti dulu... kita selesaikan dulu semua icon sebelum bersih-bersih akhir.
Artikel ini bakal jadi bagian pertama dari serial pembebasan dari ketergantungan icon library luar. Saya bakal terus update setiap tahapan — dari upload icon, styling CSS, sampai di optimasi PageSpeed Insight.
Intinya, bro... Kamu bisa banget mulai perubahan kecil ini. Gak harus jago vector, yang penting paham alur dasarnya:
- Bikin desain icon vektor dengan gayamu sendiri
- Ekspor ke SVG
- Optimasi via SVGOMG
- Upload SVG ke GitHub Pages
- Panggil via CSS & tampilkan dengan style Kamu sendiri
Ini bukan cuma soal ganti icon. Ini soal kontrol penuh atas desain Kamu sendiri, tanpa beban tambahan.
Stay tune di Part 2. Kita bakal bahas cara konsolidasi semua icon ke satu file SVG sprite biar makin hemat dan cepat!