Receita

htmx

O htmx troca HTML vindo do servidor, e todo formato do glyphfox é HTML: SVG inline renderizado no servidor, elementos <glyph-fox> ou placeholders data-glyph.

Renderizar SVG no servidor

server.js

import express from 'express';
import { toSvg } from 'glyphfox';

const app = express();
let liked = false;

app.post('/like', (req, res) => {
  liked = !liked;
  const icon = toSvg(liked ? 'heart/solid' : 'heart', { size: 20, animate: 'pop', title: liked ? 'Liked' : 'Like' });
  res.send(`<button hx-post="/like" hx-swap="outerHTML">${icon}</button>`);
});

toSvg devolve o ícone como markup com todas as props, e os estilos da animação vão dentro dele, então o fragmento trocado toca o pop assim que chega. Qualquer servidor Node ou edge function funciona do mesmo jeito.

Web components em conteúdo trocado

index.html

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>

<div hx-get="/notifications" hx-trigger="every 30s">
  <glyph-fox name="bell" animate="shake" trigger="state" active></glyph-fox>
</div>

Custom elements fazem o upgrade sozinhos quando o htmx os insere, então os fragmentos podem devolver tags <glyph-fox>. Com um swap que mantém os elementos e atualiza os atributos, como a extensão idiomorph, um elemento <glyph-fox morph> anima quando o servidor muda o name dele.

O runtime data-glyph

index.html

<script type="module">import 'https://cdn.jsdelivr.net/npm/glyphfox@1/dist/runtime/auto.js';</script>

<ul hx-get="/files" hx-trigger="load">
  <li><i data-glyph="file" data-modifier="check"></i> report.pdf</li>
</ul>

app.js

import { replaceGlyphs } from 'glyphfox';

document.body.addEventListener('htmx:afterSwap', (event) => replaceGlyphs(event.detail.target));

O runtime troca todo elemento data-glyph por SVG inline e continua observando, então os placeholders em conteúdo trocado também são substituídos. Com bundler, chame replaceGlyphs depois de cada swap.