Universal Emoji Parser

This tool allow parse emojis char unicodes and shortcodes to html images using emojilib && Twemoji. This allows emojis to be standard across browsers, and avoid compatibility issues.

Emojis Support:

• Twitter emojis
• GitHub emojis
• Slack emojis
• Discord emojis
• Google Chat emojis
• Microsoft Teams emojis

Installation

npm install universal-emoji-parser --save

or

yarn add universal-emoji-parser

Usage

// ES6 import
→ import uEmojiParser from 'universal-emoji-parser'

or

// CommonJS require
→ const uEmojiParser = require('universal-emoji-parser')

Using default options:

→ uEmojiParser.parse('😎')
<img class="emoji" alt="😎" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/>

→ uEmojiParser.parse(':smiling_face_with_sunglasses:')
<img class="emoji" alt="😎" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/>

→ uEmojiParser.parse('🚀')
<img class="emoji" alt="🚀" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f680.svg"/>

→ uEmojiParser.parse(':rocket:')
<img class="emoji" alt="🚀" src="https://twemoji.maxcdn.com/v/12.1.2/72x72/1f680.svg"/>

→ uEmojiParser.parse('Hello world! 😎 :smiling_face_with_sunglasses: 🚀 :rocket:')
Hello world! <img class="emoji" alt="😎" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/> <img class="emoji" alt="😎" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/> <img class="emoji" alt="🚀" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f680.svg"/> <img class="emoji" alt="🚀" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f680.svg"/>

Using method options:

• DEFAULT EMOJI CDN => https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/

| Option Name | Type | Default | Description | | :--------------- | :------ | :------------------ | :-------------------------------------------------------------------------------------------------------------------- | | emojiCDN | string | DEFAULT EMOJI CDN | Allow customize the emojis CDN. The parseToHtml option should be true to apply this option. | | parseToHtml | boolean | true | Parse emojis unicodes and shortcodes into html images. | | parseToUnicode | boolean | false | Parse emojis shortcodes into unicodes. The option parseToHtml should be false to apply. | | parseToShortcode | boolean | false | Parse emojis unicodes into shortcodes. The options parseToHtml and parseToUnicode should be false to apply. |

Using different values for options:

→ uEmojiParser.parse('😎', {})
<img class="emoji" alt="😎" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/>

→ uEmojiParser.parse(':smiling_face_with_sunglasses:', { parseToHtml: true })
<img class="emoji" alt="😎" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/>

→ uEmojiParser.parse('Hello world! :smiling_face_with_sunglasses: :rocket:', { parseToHtml: false, parseToUnicode: true })
Hello world! 😎 🚀

→ uEmojiParser.parse('Hello world! 😎 🚀', { parseToHtml: false, parseToShortcode: true })
Hello world! :smiling_face_with_sunglasses: :rocket:

Using custom CDN

→ uEmojiParser.parse('Hello world! 😎 🚀', { emojiCDN: "https://custom.emoji.cdn/gh/jdecked/twemoji@latest/assets/svg/" })
Hello world! <img class="emoji" alt="😎" src="https://custom.emoji.cdn/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/> <img class="emoji" alt="🚀" src="https://custom.emoji.cdn/gh/jdecked/twemoji@latest/assets/svg/1f680.svg"/>

→ uEmojiParser.parse('Hello world! 😎 🚀', { parseToHtml: true, emojiCDN: https://custom.emoji.cdn/gh/jdecked/twemoji@latest/assets/svg/ })
Hello world! <img class="emoji" alt="😎" src="https://custom.emoji.cdn/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/> <img class="emoji" alt="🚀" src="https://custom.emoji.cdn/gh/jdecked/twemoji@latest/assets/svg/1f680.svg"/>

→ uEmojiParser.parse('Hello world! 😎 🚀', { parseToHtml: false, emojiCDN: "https://custom.emoji.cdn/gh/jdecked/twemoji@latest/assets/svg/" })
Hello world! 😎 🚀

ℹ️ Optionally, direct methods can also be used to parse the content of the emojis through the different options:

→ uEmojiParser.parseToHtml('Hello world! 😎 :smiling_face_with_sunglasses: 🚀 :rocket:')
Hello world! <img class="emoji" alt="😎" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/> <img class="emoji" alt="😎" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f60e.svg"/> <img class="emoji" alt="🚀" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f680.svg"/> <img class="emoji" alt="🚀" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/1f680.svg"/>

→ uEmojiParser.parseToUnicode('Hello world! :smiling_face_with_sunglasses: :rocket:')
Hello world! 😎 🚀

→ uEmojiParser.parseToShortcode('Hello world! 😎 🚀')
Hello world! :smiling_face_with_sunglasses: :rocket:

Get emoji lib json data

You can get the entire emoji lib json data curated and processed to best match with shortcode keywords.

// ES6 import
→ import { emojiLibJsonData } from 'universal-emoji-parser'

or

// CommonJS require
const uEmojiParser = require('universal-emoji-parser')
const { emojiLibJsonData } = uEmojiParser

→ Object.keys(emojiLibJsonData).length
1898

→ emojiLibJsonData[🤣]
{
  name: 'rolling on the floor laughing',
  slug: 'rolling_on_the_floor_laughing',
  group: 'Smileys & Emotion',
  emoji_version: '3.0',
  unicode_version: '3.0',
  skin_tone_support: false,
  char: '🤣',
  keywords: [
    'rolling_on_the_floor_laughing',
    'rolling',
    'floor',
    'laughing',
    'rofl'
  ]
}

→ emojiLibJsonData[😎]
{
  name: 'smiling face with sunglasses',
  slug: 'smiling_face_with_sunglasses',
  group: 'Smileys & Emotion',
  emoji_version: '1.0',
  unicode_version: '1.0',
  skin_tone_support: false,
  char: '😎',
  keywords: [
    'smiling_face_with_sunglasses',
    'cool',
    'summer',
    'beach',
    'sunglass'
  ]
}

CSS Styles

To properly scale emojis to fit within their containing elements, you can apply these global CSS styles:

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}

:electric_plug: Powered by DailyBot

DailyBot is an AI Assistant powered by ChatGPT that takes chat and collaboration to the next level helping to automate: daily standups, team check-ins, surveys, kudos, virtual watercooler, 1:1 intros, motivation tracking, chatops and more. Learn more.

License

Universal Emoji Parser is MIT licensed.