Cara Memasang Icon SVG di Blog Dengan Mudah
Selain di claim membuat loading blog menjadi lebih cepat dibandingkan dengan menggunakan font awesome, format SVG pun memiliki banyak pilihan icon yang bisa digunakan secara gratis.
Sebagai contoh, icon SVG pada pada blog ini saya letakan pada menu Dark Mode, Search box, Profile, dan Back to top. Tampilan icon SVG tidak kalah menarik dari tampilan font awesome. Oleh karena itu icon SVG layak digunakan pada blog karena selain memiliki tampilan yang marik, icon SVG juga lebih ringan dibandingkan font awesome.
Lalu bagaimana cara memasang icon SVG di blog?
Cara Memasang Icon SVG di Blog
Ada beberapa langkah yang harus dilakukan untuk melakukan pemasangan icon SVG di blog.
Pertama:
Untuk contoh, pastikan anda sudah memasang menu dark mode di blog anda. Jika belum, silahkan baca artikelnya di bawah ini.
Kedua:
Masuk ke website Iconmoon.io dan cari icon SVG yang ingin anda gunakan di blog.
Setelah anda menemukan icon yang cocok, klik Generate SVG & More. Maka akan tampil halaman baru seperti gambar di bawah ini.
Klik Get Code untuk menampilkan kode icon SVG.
Kode icon SVG yang didapatkan tersebut kurang lebih bentuknya seperti ini.
<symbol id="icon-blogger" viewBox="0 0 27 27">
<path fill="#ff5722" style="fill: var(--color1, #ff5722)" d="M24.723 27h-22.444c-1.267 0-2.279-1.012-2.279-2.277v-22.444c0-1.267 1.012-2.279 2.278-2.279h22.528c1.181 0 2.194 1.012 2.194 2.278v22.444c0 1.266-1.012 2.278-2.277 2.278zM13.5 4.472h-3.375c-3.122 0-5.653 2.531-5.653 5.653v6.75c0 3.121 2.531 5.652 5.653 5.652h6.75c3.121 0 5.652-2.531 5.652-5.652v-4.472c0-0.675-0.506-1.181-1.181-1.181h-1.096c-0.589 0-1.098-0.506-1.098-1.098 0-3.123-2.531-5.654-5.652-5.652zM16.958 17.972h-6.833c-0.591 0-1.097-0.506-1.097-1.097s0.506-1.098 1.097-1.098h6.833c0.592 0 1.099 0.506 1.099 1.098s-0.506 1.098-1.099 1.097zM14.089 9.028c0.593 0 1.098 0.506 1.098 1.097s-0.506 1.097-1.097 1.097h-4.050c-0.591 0-1.098-0.506-1.098-1.097s0.506-1.097 1.097-1.097z"></path>
</symbol>Untuk mengaplikasikannya pada blog, maka anda tinggal cari menu dark mode di dalam template. Lihat contoh javascript dark mode di bawah ini.
<div class='teknsearch'>
<form action='/search' class='search' method='get'>
<input class='check' id='teknsearch' type='checkbox'/>
<input class='input' name='q' placeholder='Cari artikel...' type='text'/>
<label class='icon' for='teknsearch'>
<svg class='open' viewBox='0 0 24 24'><path d='M19.38 17.019l-4.737-4.029c-0.49-0.441-1.013-0.643-1.437-0.624 1.118-1.31 1.794-3.009 1.794-4.867 0-4.142-3.358-7.5-7.5-7.5s-7.5 3.358-7.5 7.5 3.358 7.5 7.5 7.5c1.857 0 3.557-0.676 4.867-1.794-0.020 0.423 0.183 0.947 0.624 1.437l4.029 4.737c0.69 0.767 1.817 0.831 2.504 0.144s0.623-1.814-0.144-2.504zM7.5 12.5c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5z'></path></svg>
<svg class='close' viewBox='0 0 24 24'><path d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'></path></svg>
</label>
</form>
</div>Ganti kode icon SVG yang saya tandai dengan warna kuning di menu dark mode dengan kode icon SVG sebelumnya yang sudah saya tandai dengan warna hijau.
Kenapa Icon SVG Pada Menu Dark Mode Ada Dua?
Menu dark mode yang scriptnya saya bagikan di atas memiliki dua mode tombol, yaitu tombol light dan dark. Untuk menyesuaikan icon SVG nya, maka silahkan anda mencari kembali kode SVG yang lain dengan cara yang sama di penjelasan kedua.
Setelah anda mencoba bereksperimen dengan tutorial cara memasang icon SVG di blog, selanjutnya anda tinggal menguliknya lagi agar tampilan blog anda makin kece.
Nah itulah tutorial blogger cara memasang icon SVG di blog dengan mudah.
Semoga bermanfaat.
Posting Komentar