You will need to add this block of HTML to your HTML document (can be the head or body)
<script>!function(n,t,e,o,a,i,r){var c,s=new r;function d(n){return e+n.name}function f(n,t){var e=o.createElement("div");e.innerHTML=t,e.id="Union__fragment__"+n.name,o.body.appendChild(e)}function u(n,t){"loading"!==o.readyState?f(n,t):o.addEventListener("DOMContentLoaded",function(){f(n,t)})}function h(e,o){var n=new XMLHttpRequest;n.addEventListener("load",function(){var n,t=this.responseText;if(200===this.status){try{n=t,a[d(e)]=i.stringify([s,n])}catch(n){return void console.warn("Error hydrating icon cache: ",n)}o&&o(t)}}),n.open("GET",e.url),n.send()}function m(t){h(t,function(n){u(t,n)})}t.forEach(function(n){var t,e,o=a[d(n)];o?(e=i.parse(o),t=new r(e[0]),s<t?m(n):(u(n,e[1]),setTimeout(function(){6e5<=s-t&&h(n)}))):m(n)}),c=t.map(d),Object.keys(a).forEach(function(n){n.startsWith(e)&&-1===c.indexOf(n)&&(a.removeItem(n),console.warn("Deleting fragment cache: ",n))})}(0,[{name:"iconography/latest",url:"https://union.theknot.com/dist/v2/iconography/latest/definitions-fragment.html"}],"xou/fragments/",document,window.localStorage,JSON,Date)</script>
<style>
.icon {
height: 1em;
width: 1em;
display: inline-block;
fill: currentColor;
stroke: currentColor;
stroke-width: 0;
}
</style>
This HTML block asynchronously loads the icon definitions and caches them in local storage. You will see a key in local storage named xou/fragments/iconography/latest
.
To force a re-download of the icons, you can either delete the cache key from local storage, or wait 10 minutes (the expiration period for that cache) and refresh the page.
To render icons, you just need to make a reference to their definition using this template:
<svg class="icon">
<use xlink:href="#v2-icon-{{ICON_NAME}}" />
</svg>
For example to render the attire icon you should write:
<svg class="icon">
<use xlink:href="#v2-icon-attire" />
</svg>
For a full list of all available icons, see our documentation: https://docs.union.theknot.com/docs/packages/@xo-union/tk-component-icons#iconography
To resize an icon, simply set the font-size
on the svg
element or any parent container (will be inherited)
For example, the following will render the attire
icon in 32x32 dimmensions (assuming 16px is the base document font-size)
<style>
.my-icon-container {
font-size: 2rem;
}
</style>
<svg class="icon my-icon-container">
<use xlink:href="#v2-icon-attire" />
</svg>
To change the icon color, simply set the color
property on the svg
element or any parent container (will be inherited)
For example, the following will render the attire
icon in blue
<style>
.my-icon-container {
color: blue;
}
</style>
<svg class="icon my-icon-container">
<use xlink:href="#v2-icon-attire" />
</svg>