Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<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.

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks