@github/g-emoji-element

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

Usage no npm install needed!

<script type="module">
  import githubGEmojiElement from 'https://cdn.skypack.dev/@github/g-emoji-element';
</script>

README

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