A rehype plugin to convert emoji to twemoji.
pnpm i -D rehype-twemoji
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>
format
:svg
orpng
(default:svg
)source
: source of twemoji (default:https://cdn.jsdelivr.net/gh/twitter/twemoji@latest
)
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;
}
MIT