Rehype Twemoji

A rehype plugin to convert emoji to twemoji.

Install

pnpm i -D rehype-twemoji

Usage

import { rehypeTwemoji } from 'rehype-twemoji'
import type { RehypeTwemojiOptions } from 'rehype-twemoji'

...

{
  rehypePlugins: [
    [rehypeTwemoji, {
      format: 'svg',
      source: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@latest',
    } satisfies RehypeTwemojiOptions],
  ]
}

Input:

Hello World 👋

Output:

<p>
  Hello World
  <img
    src="https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f44b.svg"
    alt="👋"
    aria-label="waving hand"
    data-twemoji=""
  />
</p>

Options

• format: svg or png (default: svg)
• source: source of twemoji (default: https://cdn.jsdelivr.net/gh/twitter/twemoji@latest)

Styling

You can use data-twemoji attribute to style the emoji.

Here is an example of using with Tailwind CSS:

[data-twemoji] {
  @apply size-[1.2em] inline-block align-text-bottom;
}

License

MIT