Alpine.js

Fluent UI Emoji for Alpine.js — an x-fluent-emoji directive and $fluentEmoji magic with tree-shakeable icon data. 3,145 emojis in flat, high-contrast, and modern styles.

Install

pnpm add @fluentui-emoji/alpine

Usage

import Alpine from 'alpinejs';
import fluentEmoji, {register} from '@fluentui-emoji/alpine';
import {Rocket} from '@fluentui-emoji/alpine/flat';

register(Rocket);
Alpine.plugin(fluentEmoji);
Alpine.start();

<span x-fluent-emoji="'rocket'"></span>
<span x-fluent-emoji="{name: 'rocket', style: 'modern', label: 'Rocket'}"></span>
<span x-data x-html="$fluentEmoji('rocket', 'flat')"></span>

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