Menggunakan Icon SVG Sprite Secara Gratis di Blog

Menggunakan Icon SVG Sprite Secara Gratis di Blog - adalah umum untuk menggunakan icon web ataupun blog untuk menautkan font seperti ionik, ikon materi,dll.

Untuk mengakses file svg, anda dapat mencobanya dengan menekan ctrl+u, sebagai contoh :
https://aurealisa.blogspot.com/responsive/sprite_v1_6.css.svg ==> atau dengan menambah view-source:

maka nanti akan menampilkan sintetiks kira kira seperti ini

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 24 24" id="ic_24_email_dark"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_24_facebook_dark"><title>Icons/ic_24_facebook_dark</title><g transform="translate(-312 -104)"><g transform="translate(312 104)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 2v3h-2c-.5 0-1 .4-1 1v2h3v3h-3v7h-3v-7h-2v-3h2V7.5C13 5.6 14.6 4 16.5 4H19z"/></g></g></symbol><symbol viewBox="0 0 24 24" id="ic_24_googlePlus_dark"><title>Icons/ic_24_google+_dark</title><g transform="translate(-344 -136)"><g transform="translate(344 136)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22.5 11h-2V9H19v2h-2v1.5h2v2h1.5v-2h2V11z"/><path fill="none" d="M1.5 5h14v14h-14V5z"/><path d="M8.5 10.7v2.7h3.8c-.3 1.6-1.7 2.8-3.8 2.8-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2c1 0 2 .4 2.7 1.1l2-2C12 5.7 10.4 5 8.5 5c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-1-.1-1.4H8.5v-.1z"/></g></g></symbol><symbol viewBox="0 0 24 24" id="ic_24_link_dark"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></symbol><symbol viewBox="0 0 24 24" id="ic_24_pinterest_dark"><title>Icons/ic_24_pinterest_dark</title><g transform="translate(-312 -136)"><g transform="translate(312 136)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 14.2c-.8 0-1.6-.3-2.1-.9l-.9 3.2-.1.2c-.2.3-.5.5-.9.5-.6 0-1.1-.5-1.1-1.1V17.8l1.8-5.6c-9.6-12.2-.2-.6-.2-1.5 0-1.7.9-2.2 1.7-2.2s1.4.3 1.4 1.3c0 1.3-.9 2-.9 3 0 .7.6 1.3 1.3 1.3 2.3 0 3.2-1.8 3.2-3.4 0-2.2-1.9-3.9-4.2-3.9s-4.2 1.8-4.2 3.9c0 .7.2 1.3.5 1.9.1.2.1.3.1.5 0 .6-.4 1-1 1-.4 0-.7-.2-.9-.5-.5-.9-.8-1.9-.8-3 0-3.3 2.8-5.9 6.2-5.9s6.2 2.7 6.2 5.9c.1 2.8-1.5 5.6-5.1 5.6z"/></g></g></symbol><symbol viewBox="0 0 24 24" id="ic_24_twitter_dark"><title>Icons/ic_24_twitter_dark</title><g transform="translate(-344 -104)"><g transform="translate(344 104)"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2.3 7.3c-.1 4.6-3 7.8-7.4 8-1.8.1-3.1-.5-4.3-1.2 1.3.2 3-.3 3.9-1.1-1.3-.1-2.1-.8-2.5-1.9.4.1.8.1 1.1 0-1.2-.4-2-1.1-2.1-2.7.3.2.7.3 1.1.3-.9-.5-1.6-2.3-.8-3.6C8 8.5 9.6 9.7 12.2 9.9c-.6-2.8 3.1-4.3 4.6-2.4.7-.1 1.2-.4 1.7-.7-.2.7-.6 1.1-1.1 1.5.5-.1 1-.2 1.4-.4 0 .5-.6 1-1.1 1.4z"/></g></g></symbol><symbol viewBox="0 0 24 24" id="ic_add_box_black_24dp"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_arrow_back_black_24dp"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></symbol><symbol viewBox="0 0 24 24" id="ic_arrow_forward_black_24dp"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></symbol><symbol viewBox="0 0 24 24" id="ic_chat_bubble_black_24dp"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_check_box_black_24dp"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></symbol><symbol viewBox="0 0 24 24" id="ic_check_box_outline_blank_black_24dp"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_chevron_left_black_24dp"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_chevron_right_black_24dp"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_close_black_24dp"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_expand_less_black_24dp"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_expand_more_black_24dp"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_menu_black_24dp"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></symbol><symbol viewBox="0 0 24 24" id="ic_mode_comment_black_24dp"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_more_horiz_black_24dp"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></symbol><symbol viewBox="0 0 24 24" id="ic_more_vert_black_24dp"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></symbol><symbol viewBox="0 0 24 24" id="ic_person_black_24dp"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_post_blogger_black_24dp"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 20c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 7v1c0 .55.45 1 1 1s1 .45 1 1v3c0 1.66-1.34 3-3 3H9c-1.66 0-3-1.34-3-3V8c0-1.66 1.34-3 3-3h4c1.66 0 3 1.34 3 3v1zm-6.05 1h2.6c.55 0 1-.45 1-1s-.45-1-1-1h-2.6c-.55 0-1 .45-1 1s.45 1 1 1zM14 13H9.95c-.55 0-1 .45-1 1s.45 1 1 1H14c.55 0 1-.45 1-1s-.45-1-1-1z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_rss_feed_black_24dp"><path fill="none" d="M0 0h24v24H0z"/><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></symbol><symbol viewBox="0 0 24 24" id="ic_search_black_24dp"><path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></symbol><symbol viewBox="0 0 24 24" id="ic_share_black_24dp"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></symbol></svg>

Icon ini dirancang pada kotak tampilan, anda harus mengatur lebar dan tinggi dengan 24px agar tidak tata letak tidak. Jadi sebelum menggunakan, saya akan meletakkan class generik dengan css sebagai berikut

.svg-24 {
  width: 24px;
  height: 24px;
  /* fill: #888; Atur warna icon svg */
}

Kemudian tuliskan kodenya seperti ini

<svg class="svg-24"><use xlink:href='/responsive/sprite_v1_6.css.svg#ID_ICON' xmlns:xlink='//www.w3.org/1999/xlink'></use></svg>

Sangat sederhana, kodenya hampir seperti tag img

Ini adalah sumber yang bagus dari blogger yang jarang anda perhatikan, iconnya juga cukup bagus untuk mengganti web tidak menempatkan ikon yang berat.

Demikianlah artikel mengenai tutorial, blogger, sekarang Aurealisa akan membagikan 26 icon yang telah saya filter untuk anda, semoga bermanfaat :v

id	icon
ic_24_email_dark
ic_24_facebook_dark
ic_24_googlePlus_dark
ic_24_link_dark
ic_24_pinterest_dark
ic_24_twitter_dark
ic_add_box_black_24dp
ic_arrow_back_black_24dp
ic_arrow_forward_black_24dp
ic_chat_bubble_black_24dp
ic_check_box_black_24dp
ic_check_box_outline_blank_black_24dp
ic_chevron_left_black_24dp
ic_chevron_right_black_24dp
ic_close_black_24dp
ic_expand_less_black_24dp
ic_expand_more_black_24dp
ic_menu_black_24dp
ic_mode_comment_black_24dp
ic_more_horiz_black_24dp
ic_more_vert_black_24dp
ic_person_black_24dp
ic_post_blogger_black_24dp
ic_rss_feed_black_24dp
ic_search_black_24dp
ic_share_black_24dp

Nah itulah postingan tentang cara menggunakan Icon SVG Sprite Secara gratis di blog yg bisa anda ikuti.

blogger tutorial