Self-host the assets

Serve the manifest and sprite sheets from an origin you control, and point Emoji at it. Use this when you cannot allow a third-party origin in your Content Security Policy, or when you do not want to depend on the default asset site. Terms follow CONTEXT.md.

Build the site

The asset site is generated by apps/assets into apps/assets/dist-assets/; nothing it produces is committed. From a clone of the repository, run bun run assets:build (it needs ffmpeg, see development) and publish the contents of apps/assets/dist-assets/ to any static host. Keep the v1/ layout, and the _headers file when your host supports it, because it caches the content-addressed sprites as immutable. The layout is described in architecture.

To publish to Cloudflare Pages the way this project does, follow set up asset hosting.

Point the component at it

Call configureEmojis once, before the first Emoji renders. A trailing slash on the URL is ignored:

import { configureEmojis } from 'animated-fluent-emojis'

configureEmojis({ assetSiteUrl: 'https://emojis.example.com' })

Calling it after the manifest was requested resets the manifest and warns in development. See the asset site section of the usage guide.

Set the Content Security Policy

Allow your origin in both directives. The manifest is fetched, and the sprite sheets load through <img>:

connect-src https://emojis.example.com
img-src https://emojis.example.com

The sprite URL is <site>/v1/sprites/<category title>/<id><tone>.<etag>.png, with @2x before the extension for an HD sprite sheet, so one origin covers both. The framework adapters inject no <style> element, so they need no style-src allowance; the <fluent-emoji> element adds one to its shadow root and does. The design and its limits are in security.

Verify

Open the page with the network panel and check that the manifest request goes to /v1/manifest.slim.json on your origin, and that no request goes to animated-fluent-emojis-cdn.andryore.dev. A blocked request shows as a CSP violation in the console, and the emoji renders its fallback; see fallback.