Documentation for consuming union icons in a framework agnostic way

UnionIcons.md

Steps

1. Install icon loader

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>

What it does

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.

2. Make references to any icon

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

Tips

Resize icon

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>

Change icon color

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>