Cara Memasang Icon SVG ke Dalam Blog

Pada artikel sebelumnya sudah pernah dibahas mengenai cara memasang icon SVG kedalam blog ini, namun untuk artikel tersebut perlu di update

Daftar isi

Baca Juga

Pada artikel sebelumnya sudah pernah dibahas mengenai cara memasang icon SVG kedalam blog ini, namun untuk artikel tersebut perlu di update karena ada perubahan pada layanan penggunaan icon SVG. Layanan penyedia icon SVG yang dibahas dalam artikel sebelumnya mengalami update, yang menurut saya sudah mengalami perubahan yang sangat baik dari sebelumnya.

Baca Juga: Cara Membuat & Menggunakan Icon SVG Untuk Ikon Blog

Adalah Material Design Icons dengan situs materialdesignicons.com yang sudah mengalami perubahan dan juga meredirect situsnya ke pictogrammers.com. Semua designs icon yang ada di material design icons sudah ada di website terbaru yang merupakan layanan open source icons dan fonts.

SVG singkatan dari Scalable Vector Graphics yang dibuat untuk mendefinisikan sebuah grafis dan gambar bentuk icon. Jadi penggunaannya sangat mudah dan sederhana. Begitu juga dengan penggunaan icon SVG yang ada web materialdesignicons.com, caranya pun hampir sama dengan webnya yang terbaru.

Hanya saja untuk tampilan dari web terbaru ini yaitu pictogramers.com yang menampilkan kumpulan icon SVG agak membingungkan. Meskipun icon-icon tersebut sudah dikumpulkan menjadi beberapa kategori, yang seharusnya lebih mudah digunakan.

Namun tampilan awal dari icon SVG yang akan digunakan sudah berbeda dari sebelumnya, untuk tampilan yang terbaru yang ada di pictogrammers.com lebih komplit. Jika Anda pengguna website Material Design Icons pasti akan tahu perubahan ini.

Bagaimana Cara Memasang Icon SVG?

Untuk memasang dan menggunakan icon SVG ini sebenarnya sangat tidak sulit, silahkan ikuti langkah-langkah berikut ini:

1. Bukan situs pictogrammersdi https://pictogrammers.com/library/mdi/ untuk versi defaultnya dan https://pictogrammers.com/library/mdil/ untuk versi light. Versi light ini adalah versi dengan tampilan lebih tipis.
2. Setelah situs terbuka, akan tampil halaman seperti gambar dibawah ini:
   
3. Pilih dan klik icon SVG sesuai yang Anda inginkan. Dengan mengklik gambar icon, misalkan icon note-plus akan tampilan halaman seperti gambar dibawah ini
   
4. Untuk menggunakan icon ini, Anda tidak perlu melakukan blok pada code icon atau membuka form code untuk menyalin kode icon SVG yang akan digunakan.
5. Untuk menggunakan icon pada update pemasangan SVG menggunakan layanan Material Design Icons ini, Anda cukup melakukan klik pada icon </>
6. Dengan mengklik pada icon </>, maka kode HTML dari icon SVG yang diinginkan sudah terCopy secara otomatis. Pastekan atau salin kedalam blog Anda atau kedalam widget yang Anda inginkan.
7. Selesai.

Sangat mudah kan untuk memasang icon SVG ini kedalam blog. Sebenarnya banyak juga layanan penyedia icon SVG dengan memberikan embed kode HTMLnya namun untuk beberapa layanan, mereka tidak memberikan icon SVG secara gratis alias PREMIUM SVG