Skip to content

Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.

License

Notifications You must be signed in to change notification settings

github/g-emoji-element

Repository files navigation

<g-emoji> element

Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.

Installation

$ npm install @github/g-emoji-element

Usage

import '@github/g-emoji-element'
<g-emoji fallback-src="t-rex.png" alias="T-Rex">🦖</g-emoji>

If a browser supports emoji, nothing happens. If a browser does not support emoji, a fallback image tag is created:

<g-emoji fallback-src="t-rex.png" alias="T-Rex">
  <img class="emoji" alt="T-Rex" height="20" width="20" src="t-rex.png">
</g-emoji>

Skin tones

The tone attribute renders the emoji with a skin tone modifier between 1-5. Use 0 to display the default tone.

<g-emoji tone="0">👋</g-emoji>
<g-emoji tone="1">👋🏻</g-emoji>
<g-emoji tone="2">👋🏼</g-emoji>
<g-emoji tone="3">👋🏽</g-emoji>
<g-emoji tone="4">👋🏾</g-emoji>
<g-emoji tone="5">👋🏿</g-emoji>
> const emoji = document.createElement('g-emoji')
> emoji.textContent = '👋'
> emoji.tone = '5'
> document.body.append(emoji)
> emoji.textContent
"👋🏿"

The tone attribute accepts a space separated list of skin tone modifiers to apply to each base emoji in a sequence. Some platforms will display these sequences as a single glyph while others will render each emoji in the sequence.

<g-emoji tone="4 5">🧑🏾<200d>🤝<200d>🧑🏿</g-emoji>

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.