Lit

Fluent UI Emoji for Lit — a <fluent-emoji> LitElement plus template helpers, with tree-shakeable icon data. 3,145 emojis in flat, high-contrast, and modern styles.

Install

pnpm add @fluentui-emoji/lit

Usage

As an element:

import {defineFluentEmoji, register} from '@fluentui-emoji/lit';
import {Rocket} from '@fluentui-emoji/lit/flat';

register(Rocket);
defineFluentEmoji();

<fluent-emoji name="rocket"></fluent-emoji>
<fluent-emoji name="rocket" variant="modern" label="Rocket"></fluent-emoji>

Inside your own templates:

import {html} from 'lit';
import {emojiTemplate} from '@fluentui-emoji/lit';
import {Rocket} from '@fluentui-emoji/lit/flat';

html`<button>${emojiTemplate(Rocket, 'Launch')} Launch</button>`;

Only imported icons end up in your bundle. Without label the svg is aria-hidden.