Receita

Alpine.js

O web component <glyph-fox> reage a mudanças de atributo, que é exatamente o que os bindings do Alpine produzem. Não é preciso nenhuma etapa de build.

Configuração

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>

O build do glyphfox para CDN define <glyph-fox> com todos os ícones e expõe window.glyphfox.

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

Com o atributo morph, toda mudança de name anima do ícone antigo para o novo. Toda prop é um atributo em kebab-case, então :weight, :modifier e :morph-to se vinculam do mesmo jeito.

SVG inline com 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 devolve markup SVG puro com as mesmas props, para lugares onde um custom element não cabe, como dentro de um svg existente.