pele-animate

Custom icons

Register your own icons with registerGlyphs:

import { registerGlyphs, S, L } from 'pele-animate/glyphs';

registerGlyphs({
  'my-box': `<rect x="4" y="6" width="16" height="12" rx="2" fill="${L}" stroke="${S}"/>`,
});

Then use icon: "my-box" in your Mermaid.

The contract

  • A glyph is the inner markup of a 24 by 24 SVG: shapes only, no <svg> wrapper. Draw inside the 24 by 24 box.
  • Colors: use S (solid) and L (light), which are the CSS variables --pa-solid and --pa-light with fallbacks, plus W for white. Then the glyph follows light and dark themes (see theming).
  • registerGlyphs(pack, strokeWidth = 1.1) wraps each glyph in a group with that stroke width. Pele draws icons at stroke width 2, which looks heavy on a large icon, so glyphs get a thinner one.
  • Line icons that should respond to --pa-stroke (as the Tabler packs do) can use registerTabler(pack, strokeWidth = 1.5) instead. It sets fill none, round caps and joins, and the stroke color for you.

Names

Registering a name that already exists replaces it. Choose a prefix for your own pack (acme-box) so your names never clash with Tabler's plain names.

Safety

Glyph markup is inserted into the page as SVG. Only register markup you trust. See security.

Edit this page on GitHub · View as Markdown