universal-emoji-parser

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.