Recipe

Alpine.js

The <glyph-fox> web component reacts to attribute changes, which is exactly what Alpine bindings produce. No build step needed.

Setup

index.html

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.0/dist/cdn.min.js"></script>

The glyphfox CDN build defines <glyph-fox> with every icon and exposes window.glyphfox.

Bind props

index.html

<div x-data="{ open: false, unread: 3 }">
  <button @click="open = !open" :aria-expanded="open">
    <glyph-fox :name="open ? 'x' : 'menu'" morph></glyph-fox>
  </button>

  <glyph-fox name="bell" animate="shake" trigger="state" :active="unread > 0"></glyph-fox>
  <glyph-fox name="heart" :variant="open ? 'solid' : 'outline'" secondary-color="#ff7a1a"></glyph-fox>
</div>

With the morph attribute, every change of name animates from the old icon to the new one. Every prop is an attribute in kebab-case, so :weight, :modifier and :morph-to bind the same way.

Inline SVG with x-html

index.html

<span x-data="{ liked: false }" @click="liked = !liked"
      x-html="glyphfox.toSvg(liked ? 'heart/solid' : 'heart', { size: 20, title: 'Like' })"></span>

glyphfox.toSvg returns plain SVG markup with the same props, for places where a custom element does not fit, such as inside an existing svg.