Receta

htmx

htmx intercambia HTML del servidor, y todos los formatos de glyphfox son HTML: SVG en línea renderizado en el servidor, elementos <glyph-fox> o placeholders data-glyph.

Renderizar SVG en el 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 devuelve el icono como marcado con todas las props, y los estilos de la animación viajan dentro, así que el fragmento intercambiado reproduce el pop en cuanto llega. Cualquier servidor Node o edge function funciona igual.

Componentes web en contenido intercambiado

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>

Los custom elements se actualizan solos cuando htmx los inserta, así que los fragmentos pueden devolver etiquetas <glyph-fox>. Con un swap que conserva los elementos y actualiza sus atributos, como la extensión idiomorph, un elemento <glyph-fox morph> se anima cuando el servidor cambia su name.

El 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));

El runtime reemplaza cada elemento data-glyph por SVG en línea y sigue observando, así que los placeholders del contenido intercambiado también se reemplazan. Con un bundler, llama a replaceGlyphs después de cada swap.