Rezept

Alpine.js

Die Web Component <glyph-fox> reagiert auf Attributänderungen, und genau die erzeugen Alpine-Bindings. Ein Build-Schritt ist nicht nötig.

Einrichtung

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>

Der CDN-Build von glyphfox definiert <glyph-fox> mit allen Icons und stellt window.glyphfox bereit.

Props binden

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>

Mit dem Attribut morph animiert jede Änderung von name vom alten zum neuen Icon. Jede Prop ist ein Attribut in kebab-case, daher werden :weight, :modifier und :morph-to genauso gebunden.

Inline-SVG mit 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 liefert reines SVG-Markup mit denselben Props, für Stellen, an die kein Custom Element passt, etwa in ein vorhandenes svg.