Last active
June 6, 2018 18:33
-
-
Save joshcummingsdesign/4b8da0b8675f82d4551f72cc6480c168 to your computer and use it in GitHub Desktop.
SVG Sprites
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Using em units allows you to | |
// change the size using font-size | |
// on the parent. | |
// Using fill and stroke currentColor | |
// allows you to set the color using color | |
// on the element. | |
.a-icon { | |
display: inline-block; | |
width: 1em; | |
height: 1em; | |
stroke-width: 0; | |
stroke: currentColor; | |
fill: currentColor; | |
} | |
.a-icon--logo-wrap { | |
font-size: 10px; | |
} | |
.a-icon--logo { | |
height: 25em; | |
width: 25.6em; | |
color: #161614; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Dynamically call an icon using an include --> | |
<svg class='a-icon a-icon--{{ include.name }}'> | |
<title>{{ include.title }}</title> | |
<use xlink:href='#icon-{{ include.name }}'></use> | |
</svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Include your icon wherever you want and voilà --> | |
<div class="a-icon--logo-wrap"> | |
{% include atoms/a-icon.html name='logo' title='My Logo' %} | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Include your SVG sprite sheet after the opening body tag --> | |
{% include l-svgs.html %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Define your SVG sprite sheet --> | |
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
<defs> | |
<!-- Include as many symbol definitions as you want here --> | |
{% include logo.svg.html %} | |
</defs> | |
</svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Use a tool like icomoon to get your symbol definition --> | |
<symbol id="icon-logo" viewBox="0 0 33 32"> | |
<path d="M16.384 0c-9.048 0-16.384 7.335-16.384 16.384 0 7.239 4.695 13.38 11.204 15.547 0.819 0.152 1.119-0.355 1.119-0.788 0-0.391-0.015-1.681-0.022-3.050-4.558 0.991-5.52-1.933-5.52-1.933-0.745-1.894-1.819-2.397-1.819-2.397-1.487-1.017 0.112-0.996 0.112-0.996 1.645 0.116 2.512 1.688 2.512 1.688 1.461 2.505 3.833 1.781 4.768 1.362 0.147-1.059 0.572-1.782 1.040-2.191-3.639-0.414-7.465-1.819-7.465-8.097 0-1.789 0.64-3.25 1.688-4.398-0.17-0.413-0.731-2.079 0.159-4.336 0 0 1.376-0.44 4.507 1.679 1.307-0.363 2.709-0.545 4.101-0.551 1.392 0.006 2.795 0.188 4.104 0.551 3.127-2.12 4.501-1.679 4.501-1.679 0.892 2.257 0.331 3.923 0.161 4.336 1.051 1.147 1.686 2.609 1.686 4.398 0 6.293-3.833 7.678-7.481 8.084 0.588 0.508 1.111 1.506 1.111 3.034 0 2.192-0.019 3.957-0.019 4.496 0 0.436 0.295 0.947 1.125 0.786 6.506-2.169 11.195-8.308 11.195-15.545 0-9.049-7.336-16.384-16.384-16.384zM6.136 23.34c-0.036 0.081-0.164 0.106-0.281 0.050-0.119-0.053-0.186-0.164-0.147-0.246 0.035-0.084 0.164-0.107 0.282-0.051 0.119 0.053 0.187 0.166 0.146 0.247zM6.942 24.059c-0.078 0.072-0.231 0.039-0.335-0.076-0.107-0.114-0.127-0.267-0.048-0.34 0.081-0.072 0.229-0.039 0.336 0.076 0.107 0.116 0.128 0.267 0.046 0.34zM7.495 24.979c-0.1 0.070-0.265 0.004-0.366-0.141-0.1-0.146-0.1-0.32 0.002-0.39s0.263-0.007 0.366 0.138c0.1 0.148 0.1 0.323-0.002 0.394zM8.43 26.044c-0.090 0.099-0.281 0.072-0.421-0.063-0.143-0.132-0.183-0.32-0.093-0.419s0.283-0.071 0.424 0.063c0.142 0.132 0.186 0.321 0.090 0.419zM9.639 26.404c-0.040 0.128-0.224 0.187-0.409 0.132-0.185-0.056-0.307-0.206-0.269-0.336 0.039-0.129 0.224-0.19 0.411-0.132 0.185 0.056 0.307 0.205 0.268 0.336zM11.014 26.557c0.005 0.135-0.153 0.247-0.348 0.25-0.196 0.004-0.354-0.105-0.357-0.238 0-0.136 0.154-0.247 0.35-0.251 0.195-0.004 0.354 0.105 0.354 0.239zM12.365 26.505c0.023 0.132-0.112 0.267-0.306 0.303-0.19 0.035-0.366-0.047-0.39-0.177-0.024-0.135 0.114-0.27 0.304-0.305 0.194-0.034 0.367 0.046 0.392 0.18z"></path> | |
</symbol> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment