Icon sample

sample/test.njk

@@ -1,6 +1,24 @@
-<style>{% bundleGet "css" %}</style>
+<style>{% getBundle "css" %}</style>
 {%- css %}* { color: blue; }{% endcss %}
-<style>{% bundleGet "css" %}</style>
+<style>{% getBundle "css" %}</style>
 {%- css %}* { color: blue; }{% endcss %}
 {%- css %}* { color: red; }{% endcss %}
-<style>{% bundleGet "css" %}</style>
+<style>{% getBundle "css" %}</style>
+
+<svg width="0" height="0" aria-hidden="true" style="position: absolute;">
+	<defs>{%- getBundle "html", "svg" %}</defs>
+</svg>
+
+<!-- And anywhere on your page you can add icons to the set -->
+{% html "svg" %}
+<g id="icon-close">
+	<path d="M8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 Z M10.44352,10.7233105 L10.4528296,10.7326201 L10.7326201,10.4528296 C11.0310632,10.1543865 11.0314986,9.66985171 10.7335912,9.37194437 L9.36507937,8.0034325 L10.7360526,6.63245928 C11.0344957,6.33401613 11.0349311,5.84948135 10.7370237,5.55157401 L10.448426,5.26297627 C10.1505186,4.96506892 9.66598387,4.96550426 9.36754072,5.26394741 L8.00589385,6.62559428 L6.63738198,5.25708241 C6.33947464,4.95917507 5.85493986,4.95961041 5.55649671,5.25805356 L5.26737991,5.54717036 C4.96893676,5.84561351 4.96850142,6.33014829 5.26640876,6.62805563 L6.62561103,7.9872579 L5.25463781,9.35823112 C4.95619466,9.65667427 4.95575932,10.141209 5.25366666,10.4391164 L5.5422644,10.7277141 C5.84017175,11.0256215 6.32470652,11.0251861 6.62314967,10.726743 L7.99412289,9.35576976 L9.36263476,10.7242816 C9.66054211,11.022189 10.1450769,11.0217536 10.44352,10.7233105 Z" />
+</g>
+{% endhtml %}
+
+And now you can use `icon-close` in as many SVG instances as you’d like (without repeating the heftier SVG content).
+
+<svg><use xlink:href="#icon-close"></use></svg>
+<svg><use xlink:href="#icon-close"></use></svg>
+<svg><use xlink:href="#icon-close"></use></svg>
+<svg><use xlink:href="#icon-close"></use></svg>