sparkui-icons

Emoji → Lucide icon replacement library for SparkUI. Replaces 208 emoji characters with inline Lucide SVG icons in a single regex pass.

Installation

npm install @limeade-labs/sparkui-icons

Usage

const { replace, lookup, has } = require('@limeade-labs/sparkui-icons');

// Replace emojis in HTML strings
const html = '<h1>⚡ Dashboard</h1><p>📊 Stats and 🔥 Performance</p>';
const result = replace(html);
// Emojis are replaced with inline Lucide SVGs

// Look up a single emoji
const entry = lookup('⚡');
// { name: 'zap', svg: '<svg class="lucide lucide-zap" ...' }

// Check if an emoji is mapped
has('⚡');  // true
has('🦄');  // false

API

replace(html, options?)

Replace mapped emojis with inline SVGs.

Options: | Option | Default | Description | |--------|---------|-------------| | size | 20 | Icon size in pixels | | class | 'sparkui-icon' | CSS class for icons | | preserveEmoji | true | Keep emoji as aria-label for accessibility | | strokeWidth | 2 | SVG stroke width | | variant | 'outline' | Rendering style: 'outline', 'filled', or 'duotone' | | color | — | Color for filled variant | | fillColor | — | Fill color for duotone variant | | strokeColor | — | Stroke color for duotone variant | | fillOpacity | 0.35 | Fill opacity for duotone variant | | colorMap | — | Per-emoji color overrides (import from colors.js) |

Protected regions: Content inside <code>, <pre>, <textarea>, and elements with data-sparkui-no-replace is never modified.

Skin tones: Automatically stripped before lookup (👍🏻 → 👍).

lookup(emoji) → { name, svg } | undefined

has(emoji) → boolean

entries() → Iterator<[emoji, { name, svg }]>

size() → number

Performance

• < 2ms for realistic 50KB pages (~100 emojis)
• Pre-compiled regex and pre-built replacement strings
• Zero runtime file I/O
• Protected region detection via fast pre-check

Colored Circles

Circle emojis (🔴 🟢 🟡 🔵 ⚪ 🟠) are mapped to the Lucide circle icon with color-specific CSS classes:

.sparkui-icon.sparkui-red    { color: #ef4444; }
.sparkui-icon.sparkui-green  { color: #22c55e; }
.sparkui-icon.sparkui-yellow { color: #eab308; }
.sparkui-icon.sparkui-blue   { color: #3b82f6; }
.sparkui-icon.sparkui-white  { color: #e5e7eb; }
.sparkui-icon.sparkui-orange { color: #f97316; }

Icon Mapping

208 emojis mapped across categories: Navigation, Sections, Actions, Status, Health, Food, Finance, Travel, Education, Entertainment, Weather, Communication, and Misc.

Build Notes

• 🪣 → paint-bucket (lucide-static doesn't have bucket)
• ✅/❌ map to circle-check/circle-x (status versions, not check-circle/x-circle)
• Some emojis share icon names (🌮/🍴 → utensils, 🔧/🛠️ → wrench, etc.)

License

MIT