pele-animate

Icons

A flowchart node becomes an illustrated node with Mermaid's own @{ } syntax:

Mermaid source
flowchart LR
  A@{ icon: "device-desktop", form: "square", h: 88, label: "Laptop" }
  B@{ icon: "server", form: "square", h: 88, label: "Server" }
  A -->|request| B

Both names are in the Tabler devices category, so this needs import 'pele-animate/tabler/devices'.

  • icon is the glyph name. label is the caption.
  • form: "square", h: 88 makes a large frameless icon. Leave both out for a small icon inside a frame.
  • Call mount(el, prepare(src), { icons }) with prepare from pele-animate. Pele sizes an icon node from its label, so a label shorter than h would put edge ends and arrowheads under the icon; prepare pads the label so the box fits.
  • Unknown names get a neutral rounded square, never a blank slot. Pele ships no icons of its own, so every name must come from a pack you import.

Packs

Icons come from packs. Importing a pack module registers its icons.

Pack Import Contents
Tabler categories pele-animate/tabler/<category> 4,368 outline icons in 36 categories, from Tabler Icons 3.49.0 (MIT)
doverunner-* (optional) pele-animate/preset-doverunner 20 filled, two-tone illustrations named doverunner-<name> (see below)
Your own registerGlyphs() See custom icons

Pass the resolver to Pele: mount(el, src, { icons }) with import { icons } from 'pele-animate/glyphs'.

Tabler categories

Import only the categories you use; each is its own module (the largest, system, is about 199 KB).

Category Icons Category Icons Category Icons
system 784 map 263 food 96
devices 363 document 209 buildings 95
design 350 text 194 vehicles 90
arrows 333 shapes 187 math 88
media 160 e-commerce 155 health 87
communication 121 sport 76 currencies 76
development 63 weather 61 photography 52
mood 52 nature 50 games 48
computers 44 database 42 laundry 40
charts 39 symbols 37 badges 22
electrical 19 animals 18 gestures 17
version-control 16 extensions 13 logic 8

Brand, Letters, Numbers, Zodiac and Gender are not included. Counts are for Tabler 3.49.0.

Finding a name

Do not guess names. Look them up:

  • The icon browser searches names and tags and copies a ready snippet; the same list is icons.json.
  • Tabler's own site, tabler.io/icons, lists names and categories (use the outline style).
  • In your project: node_modules/pele-animate/tabler/<category>.js lists every name in that category as an object key.
  • Names that exist in more than one place are not a problem: Tabler names are plain (server, lock), doverunner-* names are prefixed.

Stroke width

Tabler icons are line icons drawn to work at any stroke width. Set the CSS variable --pa-stroke on the container:

.pa-scene { --pa-stroke: 1; }

The default is 1.5. Tabler draws at 2. The doverunner-* glyphs have a fixed stroke width.

The optional doverunner-* pack

pele-animate/preset-doverunner ships 20 filled, two-tone glyphs in the style of the DoveRunner Lab product cards, named doverunner-<name>: player, server, key, document, shield, phone, cloud, package, token, lock, database, video, media, encoder, storage, plugin, variants, watermark, bits-a, bits-b. Import it only if you want that look; nothing else needs it.

Edit this page on GitHub · View as Markdown