Rezept

htmx

htmx tauscht HTML vom Server aus, und jedes glyphfox-Format ist HTML: auf dem Server gerendertes Inline-SVG, <glyph-fox>-Elemente oder data-glyph-Platzhalter.

SVG auf dem Server rendern

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 liefert das Icon als Markup mit allen Props, und die Animationsstile reisen darin mit, daher spielt das ausgetauschte Fragment das pop ab, sobald es ankommt. Jeder Node-Server und jede Edge Function funktioniert genauso.

Web Components in ausgetauschtem Inhalt

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 führen ihr Upgrade selbst aus, wenn htmx sie einfügt, daher können Fragmente <glyph-fox>-Tags zurückgeben. Mit einem Swap, der Elemente behält und ihre Attribute aktualisiert, etwa der Erweiterung idiomorph, animiert ein <glyph-fox morph>-Element, wenn der Server sein name ändert.

Die data-glyph-Runtime

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

Die Runtime ersetzt jedes data-glyph-Element durch Inline-SVG und beobachtet weiter, daher werden auch Platzhalter in ausgetauschtem Inhalt ersetzt. Mit einem Bundler rufst du stattdessen nach jedem Swap replaceGlyphs auf.