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