Skip to content

Instantly share code, notes, and snippets.

@miclgael

miclgael/1-global-symbol-list.html

Last active March 7, 2022 21:47
Show Gist options
  • Save miclgael/26b144f528980c3c818859f6055acffa to your computer and use it in GitHub Desktop.
Save miclgael/26b144f528980c3c818859f6055acffa to your computer and use it in GitHub Desktop.
Download ZIP
SVG Symbol Definitions
Raw
1-global-symbol-list.html
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 32 32">
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</symbol>
<!-- etc. -->
<symbol>
<path></path>
</symbol>
<!-- etc. -->
<symbol>
<path></path>
</symbol>
</defs>
</svg>
Raw
2-use-in-template.html
<svg class="icon icon-home">
<use xlink:href="#icon-home"></use>
</svg>
Raw
3-icon-styles.css
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
@miclgael
Copy link
Author

miclgael commented Mar 7, 2022

e.g. https://icomoon.io/app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment