Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.
MIT License
Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.
$ npm install @github/g-emoji-element
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>
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>
Browsers without native custom element support require a polyfill.
npm install
npm test
Distributed under the MIT license. See LICENSE for details.