Create <Emoji /> component

[zenorocha]

Having a safe way to add emojis to your email would be a great addition to React Email.

From Discord:

"What is the recommended approach for working with emojis? Specifically, I want to insert Github emojis into my HTML (and later export these templates). Should I use SVGs or is there a better way?"

Notes:

• Most email clients don't support SVG
• Should we render a PNG or wrap a HTML entity? http://www.amp-what.com/unicode/search/emoticon

Useful resources:

• https://dreamyguy.github.io/react-emojis
• https://github.com/twitter/twemoji

[zenorocha]

Chat GPT detected 😅

[bdsqqq]

• Should we render a PNG or wrap a HTML entity? http://www.amp-what.com/unicode/search/emoticon

I'd lean on wrapping an HTML entity. Doing PNGs implies choosing a specific emoji set that may or may not match the user's system. This is exaggerated by the fact that the body might include an emoji used in the headline where it would use the system's style.

On the other side, PNGs add big maintenance costs but allow the library to ship new emojis even before some operating systems. (eg: WhatsApp takes this approach so Android users don't have to deal with "���" emojis when chatting with iPhone users)

(edit: "PNGs add big maintenance costs" assumes resend would make the emojis, if it's consuming a library like twemoji this line can be ignored.)

[bruno88cabral]

Last month I created an example using emojis, I just copied and pasted it from the original email, in gmail it worked perfectly, in case you want to test it in other email clients
https://demo.react.email/preview/codepen-challengers

[CanRau]

We just use emojis from os and seems to work fine so far