Receta

Alpine.js

El componente web <glyph-fox> reacciona a los cambios de atributos, que es justo lo que producen los bindings de Alpine. No hace falta ningún paso de build.

Configuración

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>

El build de glyphfox para CDN define <glyph-fox> con todos los iconos y expone window.glyphfox.

Enlazar 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>

Con el atributo morph, cada cambio de name anima del icono anterior al nuevo. Cada prop es un atributo en kebab-case, así que :weight, :modifier y :morph-to se enlazan igual.

SVG en línea con 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 devuelve marcado SVG puro con las mismas props, para los sitios donde no encaja un custom element, como dentro de un svg existente.