Skip to content

Commit 404ddf2

Browse files
author
Ben Abbott
committed
Change how SVG icons are included in pages
Normally you include a .html file containing SVG data to show social media icons on the page, but this means adding up to 27KB of bloat to every single page. With this commit I have moved the SVG data into a .scss file and converted them into Data URIs so they work on multiple browsers. This means the CSS file will contain the SVG data rather than each and every page on the site.
1 parent 8e81837 commit 404ddf2

14 files changed

+42
-86
lines changed

_includes/svg-icons.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
{% if site.footer-links.dribbble %}<a href="http://dribbble.com/{{ site.footer-links.dribbble }}">{% include svg-icons/dribbble.html %}</a>{% endif %}
2-
{% if site.footer-links.email %}<a href="mailto:{{ site.footer-links.email }}">{% include svg-icons/email.html %}</a>{% endif %}
3-
{% if site.footer-links.facebook %}<a href="http://facebook.com/{{ site.footer-links.facebook }}">{% include svg-icons/facebook.html %}</a>{% endif %}
4-
{% if site.footer-links.flickr %}<a href="http://flickr.com/{{ site.footer-links.flickr }}">{% include svg-icons/flickr.html %}</a>{% endif %}
5-
{% if site.footer-links.github %}<a href="http://github.com/{{ site.footer-links.github }}">{% include svg-icons/github.html %}</a>{% endif %}
6-
{% if site.footer-links.instagram %}<a href="http://instagram.com/{{ site.footer-links.instagram }}">{% include svg-icons/instagram.html %}</a>{% endif %}
7-
{% if site.footer-links.linkedin %}<a href="http://linkedin.com/in/{{ site.footer-links.linkedin }}">{% include svg-icons/linkedin.html %}</a>{% endif %}
8-
{% if site.footer-links.pinterest %}<a href="http://pinterest.com/{{ site.footer-links.pinterest }}">{% include svg-icons/pinterest.html %}</a>{% endif %}
9-
{% if site.footer-links.rss %}<a href="{{ site.baseurl }}/feed.xml">{% include svg-icons/rss.html %}</a>{% endif %}
10-
{% if site.footer-links.twitter %}<a href="http://twitter.com/{{ site.footer-links.twitter }}">{% include svg-icons/twitter.html %}</a>{% endif %}
11-
{% if site.footer-links.stackoverflow %}<a href="http://stackoverflow.com/{{ site.footer-links.stackoverflow }}">{% include svg-icons/stackoverflow.html %}</a>{% endif %}
1+
{% if site.footer-links.dribbble %}<a href="http://dribbble.com/{{ site.footer-links.dribbble }}"><i class="svg-icon dribbble"></i></a>{% endif %}
2+
{% if site.footer-links.email %}<a href="mailto:{{ site.footer-links.email }}"><i class="svg-icon email"></i></a>{% endif %}
3+
{% if site.footer-links.facebook %}<a href="http://facebook.com/{{ site.footer-links.facebook }}"><i class="svg-icon facebook"></i></a>{% endif %}
4+
{% if site.footer-links.flickr %}<a href="http://flickr.com/{{ site.footer-links.flickr }}"><i class="svg-icon flickr"></i></a>{% endif %}
5+
{% if site.footer-links.github %}<a href="http://github.com/{{ site.footer-links.github }}"><i class="svg-icon github"></i></a>{% endif %}
6+
{% if site.footer-links.instagram %}<a href="http://instagram.com/{{ site.footer-links.instagram }}"><i class="svg-icon instagram"></i></a>{% endif %}
7+
{% if site.footer-links.linkedin %}<a href="http://linkedin.com/in/{{ site.footer-links.linkedin }}"><i class="svg-icon linkedin"></i></a>{% endif %}
8+
{% if site.footer-links.pinterest %}<a href="http://pinterest.com/{{ site.footer-links.pinterest }}"><i class="svg-icon pinterest"></i></a>{% endif %}
9+
{% if site.footer-links.rss %}<a href="{{ site.baseurl }}/feed.xml"><i class="svg-icon rss"></i></a>{% endif %}
10+
{% if site.footer-links.twitter %}<a href="http://twitter.com/{{ site.footer-links.twitter }}"><i class="svg-icon twitter"></i></a>{% endif %}
11+
{% if site.footer-links.stackoverflow %}<a href="http://stackoverflow.com/{{ site.footer-links.stackoverflow }}"><i class="svg-icon stackoverflow"></i></a>{% endif %}

_includes/svg-icons/dribbble.html

Lines changed: 0 additions & 5 deletions
This file was deleted.

_includes/svg-icons/email.html

Lines changed: 0 additions & 5 deletions
This file was deleted.

_includes/svg-icons/facebook.html

Lines changed: 0 additions & 5 deletions
This file was deleted.

_includes/svg-icons/flickr.html

Lines changed: 0 additions & 6 deletions
This file was deleted.

_includes/svg-icons/github.html

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)