Icon refactor

[BigBlueHat]

While working on https://github.com/hypothesis/developers.hypothes.is I wanted to use the GitHub icons inline in some content. This is essentially the same refactoring I did there, but on the default Jekyll theme--in hopes that it helps others.

The footer has been refactored to use these new icon includes, and about.md shows an example of using them inline.

Example:

{% include icon-github.html username="bigbluehat" %}

These could also be handy on author pages and the like.

Hope it's useful!
🎩

[envygeeks]

I am absolutely 👍 on this because it demonstrates to a further extend how some of our software works and it also makes it cleaner to read the source. ❤️

[parkr]

What is this addition about? Can you explain this?

[BigBlueHat]

It's meant to be an example of in using the icons inline.

It looks like this:

[parkr]

Where are the SVG's used?

[envygeeks]

I believe the only place we had them previously was in the footer? /cc @jglovier who would know more if I recall right yeah?

[BigBlueHat]

@parkr @envygeeks previously they were only used in the footer. This allows them to also be used within page content--which can be pretty handy when generating author or code project pages.

See the screenshot here: #4049 (comment)

[jglovier]

I believe the only place we had them previously was in the footer?

Yup, that's correct.

Also, 👍 👍 !

[jglovier]

Sorry, I lied. There is also a hamburger menu bar which is used for collapsing the navigation on mobile.

[gynter]

👍 Why did You create separate SVG files for SVG content only? I'd probably recommend putting SVG data directly to the icon includes. One include less to make could mean smaller generation time for webs with hundreds of pages.

[parkr]

Thanks!

[envygeeks]

❤️

[BigBlueHat]

@gynter the reason for the separate .svg files is that they're actually .svg files now. 😄 They can be edited directly in Inkscape or whatever if needed. I like my files raw. 🍴 😉

Thanks for the merge @parkr!

[jglovier]