Change how SVG icons are included in pages · secgithub/secgithub.github.io@404ddf2 · GitHub

secgithub / secgithub.github.io Public

forked from barryclark/jekyll-now

• Notifications You must be signed in to change notification settings
• Fork 0
• Star 0

• Code
• Pull requests
• Actions
• Projects
• Wiki
• Security and quality
• Insights

Additional navigation options

Commit 404ddf2

Browse filesBrowse the repository at this point in the historyBrowse files

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
Copy full SHA for 404ddf2

14 files changed

+42-86Lines changed: 42 additions & 86 deletions

File tree

Expand file treeCollapse file tree

Open diff view settings

Filter options

• _includes
  • svg-icons.html
  • svg-icons
    • dribbble.html
    • email.html
    • facebook.html
    • flickr.html
    • github.html
    • instagram.html
    • linkedin.html
    • pinterest.html
    • rss.html
    • stackoverflow.html
    • twitter.html
• _scss
  • _svg-icons.scss
• style.scss

Expand file treeCollapse file tree

Open diff view settings

Collapse file

‎_includes/svg-icons.html‎

Copy file name to clipboard

+11-11Lines changed: 11 additions & 11 deletions

Original file line number	Diff line number	Diff 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 %}

Collapse file

‎_includes/svg-icons/dribbble.html‎

Copy file name to clipboardExpand all lines: _includes/svg-icons/dribbble.html

-5Lines changed: 0 additions & 5 deletions

This file was deleted.

Collapse file

‎_includes/svg-icons/email.html‎

Copy file name to clipboardExpand all lines: _includes/svg-icons/email.html

-5Lines changed: 0 additions & 5 deletions

This file was deleted.

Collapse file

‎_includes/svg-icons/facebook.html‎

Copy file name to clipboardExpand all lines: _includes/svg-icons/facebook.html

-5Lines changed: 0 additions & 5 deletions

This file was deleted.

Collapse file

‎_includes/svg-icons/flickr.html‎

Copy file name to clipboardExpand all lines: _includes/svg-icons/flickr.html

-6Lines changed: 0 additions & 6 deletions

This file was deleted.

Collapse file

‎_includes/svg-icons/github.html‎

Copy file name to clipboardExpand all lines: _includes/svg-icons/github.html

-5Lines changed: 0 additions & 5 deletions

This file was deleted.

0 commit comments

Comments

0 (0)