Sử dụng bộ icon SVG Sprites miễn phí từ Blogger

Thông thường để sử dụng icon cho blog/web ta thường link các thư viện font như font awesome, ionicons, material icons,... Nhưng vào một ngày đẹp trời bạn nhận được order từ một ông khách khó tính dạng như "Em làm cho anh cái template load nhanh vào, đừng thêm jQuery hoặc font icon vào nhé anh không thích ahihi" thì đúng là chỉ muốn đập máy. Lúc này ta nên nghĩ ngay tới SVG Sprites, con hàng luôn đi kèm với file robots.txt mỗi khi bạn tạo 1 blog mới
Tại thời điểm viết bài, SVG Sprites có ver 1.6 gồm 26 icons thiết kế theo phong cách Material Design.

Để truy cập file svg bạn có thể vào đường dẫn sau

https://your_blog.blogspot.com/responsive/sprite_v1_6.css.svg

Nó sẽ ra trắng tinh nhưng hãy CTRL + U để xem bên trong có gì. Bạn chỉ cần quan tâm tới thuộc tính id, đó là nhân tố để load đúng icon được chỉ định

Cú pháp gọi hiển thị icon có dạng

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

Bộ icon này được design trên viewbox 24, bạn nên set width và height bằng 24px để không bị tràn bố cục trang web. Như vậy trước khi sử dụng tôi sẽ đặt 1 class chung với css như sau

.svg-24 {
  width: 24px;
  height: 24px;
  /* fill: #888; Set color for svg icons */
}

Viết lại code

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

Rất đơn giản đúng không, code gần giống như 1 thẻ img

Đây là một tài nguyên rất hay từ blogger mà ít bạn để ý tới, các icon cũng khá đẹp phù hợp để thay thế cho các web không đặt nặng vấn đề icon

Cuối dùng là list 26 icon tôi đã lọc ra cho bạn tiện theo dõi, chúc bạn thành công !

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