Foundations
@rahhal/ui/rahhal-icon

RahhalIcon

View as Markdown

Cross-platform icon renderer. Parses the same prefixed catalog strings the iOS shell understands (`url:…`, `emoji:…`, `system:…`, `resource:…`, plus bare URLs/emojis) so a CMS-authored value paints identically on every client. Falls back to a muted square when the value is empty; `system:` and `resource:` render as debug tokens on the web because there's no SF Symbols / iOS bundle equivalent.

Examples

Every parser branch

url:url:

Prefixed remote image — the canonical CMS shape.

🌍emoji:

Prefixed emoji — rendered as a glyph at ~85% of size.

star.fillsystem:

iOS SF Symbol — falls back to a debug token on the web.

logoresource:

Bundled iOS resource — debug token on the web.

empty

Empty value — renders a muted placeholder square.

bare URLbare URL

No prefix but matches http(s) — heuristic falls through to url.

🚀bare emoji

Single grapheme outside ASCII — heuristic treats as emoji.

Sizes

🌍24
🌍32
🌍48
🌍64

Fallback chain

🪐icon="" + fallback="emoji:🪐"