openmoji-mithril

OpenMoji SVGs as Mithril.js components — 8,990 emoji components generated deterministically from the official openmoji npm package.

Install

bun add openmoji-mithril
# or
npm install openmoji-mithril

Usage

Each component corresponds to an OpenMoji glyph, prefixed with Emoji and converted to PascalCase from its CLDR annotation. Color variants use the base name; black variants add a Black suffix.

import m from 'mithril'
import { EmojiGrinningFace, EmojiGrinningFaceBlack } from 'openmoji-mithril'

// Basic usage — renders at the default 72×72 size
m(EmojiGrinningFace)

// Custom size (glyphs are square)
m(EmojiGrinningFaceBlack, { size: 64 })

// Any additional SVG attributes are passed through
m(EmojiGrinningFace, { size: 48, class: 'my-emoji' })

Component naming

| OpenMoji source | Component name | |------------------------------------------|-------------------------------------------------| | 1F600 color | EmojiGrinningFace | | 1F600 black | EmojiGrinningFaceBlack | | 1FAF1-1F3FF-200D-1FAF2-1F3FC color | EmojiHandshakeDarkSkinToneMediumLightSkinTone | | CLDR name collision | hexcode fallback: Emoji002AFE0F20E3 |

Skin-tone ZWJ sequences are included as flat PascalCase names (...LightSkinTone, ...MediumSkinTone, ...MediumDarkSkinTone, ...DarkSkinTone). When two glyphs share the same CLDR annotation, the component falls back to the raw hexcode with dashes removed to keep every export unique.

All 8,990 glyphs from the official OpenMoji release are available (4,485 color + 4,505 black).

Deep imports

For maximum tree-shaking — when you use a single emoji — import the component file directly instead of the package root:

import EmojiGrinningFace from 'openmoji-mithril/emoji/EmojiGrinningFace.js'

m(EmojiGrinningFace, { size: 48 })

Both openmoji-mithril/emoji/EmojiGrinningFace (no extension) and openmoji-mithril/emoji/EmojiGrinningFace.js resolve, with TypeScript declarations included. This loads exactly one component module with no bundler magic; the named import from the package root achieves the same result via sideEffects: false + tree-shaking, since every component lives in its own file.

mithril-lynx (Lynx)

mithril-lynx does not support m.trust. On Lynx, SVG must follow the native <svg> contract: content is a full <svg>...</svg> document string, and display size is set on the outer element via a style object ({ width: "Npx", height: "Npx" }), not CSS text strings.

Use the parallel emoji-lynx/ components (built with lynxIcon in lynx_svg.js):

import m from 'mithril-runtime'
import EmojiGrinningFace from 'openmoji-mithril/emoji-lynx/EmojiGrinningFace.js'

m(EmojiGrinningFace, { size: 48 })

The web entry (openmoji-mithril / emoji/*) is unchanged and still uses m.trust.

mithril-runtime is an optional peer dependency: install it when you use emoji-lynx/*.

Build

To regenerate the components from the latest version of OpenMoji:

bun install
bun run build

The build script reads SVGs and CLDR data directly from the official openmoji npm package in devDependencies (node_modules/openmoji/), so no manual cloning is needed. It regenerates emoji/*.js, emoji/*.d.ts, emoji-lynx/*.js, emoji-lynx/*.d.ts, index.js, index.d.ts, default_attrs.js and default_attrs.d.ts deterministically — identical inputs always produce byte-identical outputs. Lynx components use the shared lynx_svg.js helper (lynxIcon).

Project structure

openmoji-mithril/
├── build/
│   └── build.js          # Build script
├── emoji/                # Generated web emoji components (~18k files: .js + .d.ts)
│   ├── EmojiGrinningFace.js
│   ├── EmojiGrinningFace.d.ts
│   ├── EmojiGrinningFaceBlack.js
│   └── ...
├── emoji-lynx/           # Generated mithril-lynx emoji components (full SVG content + style size)
│   ├── EmojiGrinningFace.js
│   ├── EmojiGrinningFace.d.ts
│   └── ...
├── test/                 # Manual browser demo
├── default_attrs.js      # Default SVG attributes (size, viewBox)
├── default_attrs.d.ts    # TypeScript declarations for default_attrs
├── lynx_svg.js           # Lynx SVG helper (full content + style size)
├── lynx_svg.d.ts
├── index.js              # Generated entry point (all exports)
├── index.d.ts            # Generated TypeScript declarations
├── LICENSE               # MIT (code)
└── NOTICE                # OpenMoji graphics attribution

License

MIT — see LICENSE.

The emoji graphics are sourced from OpenMoji and are licensed under CC BY-SA 4.0 (Creative Commons Attribution-ShareAlike 4.0 International). © OpenMoji — the open-source emoji and icon project. This attribution applies to all distributed artwork; see NOTICE for details.