Components

<button href="#show-nav" class="nav-toggle fixed pin-b px-2 py-3 pr-3 border-2 border-white focus:border-smrt-green bg-smrt-pink font-bold uppercase text-base leading-none lg:hidden" :class="{ 'is-active' : isActive }" @click.prevent="toggleNav">
    <span class="flex items-center">
        <span v-if="isActive" class="icon inline-flex w-4 h-4 mr-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12">
  <defs>
    <path id="a" d="M10 4l1.5 4.5H16l-3.75 3 1.5 4.5L10 13l-3.75 3 1.5-4.5L4 8.5h4.5z"/>
  </defs>
  <use fill="#FFF" fill-rule="evenodd" transform="translate(-4 -4)" xlink:href="#a"/>
</svg></span>
        <span v-else class="icon inline-flex w-4 h-4 mr-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12">
  <defs>
    <path id="a" d="M8.333 10L4.37 6.109a1.22 1.22 0 0 1 0-1.747 1.275 1.275 0 0 1 1.78 0L10 8.142l3.852-3.78a1.275 1.275 0 0 1 1.78 0 1.219 1.219 0 0 1 0 1.747L11.666 10l3.964 3.891a1.219 1.219 0 0 1 0 1.747 1.275 1.275 0 0 1-1.78 0L10 11.858l-3.853 3.78a1.275 1.275 0 0 1-1.78 0 1.219 1.219 0 0 1 0-1.747L8.334 10z"/>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="translate(-4 -4)">
    <mask id="b" fill="#fff">
      <use xlink:href="#a"/>
    </mask>
    <use fill="#FFF" transform="rotate(-180 10 10)" xlink:href="#a"/>
    <g fill="#FFF" mask="url(#b)">
      <path d="M20 20H0V0h20z"/>
    </g>
  </g>
</svg></span>
        <span>Menu</span>
    </span>
</button>