266bd5ca9d
Bump the npm_and_yarn group with 2 updates |
||
|---|---|---|
| .devcontainer | ||
| .github/workflows | ||
| examples | ||
| script | ||
| src | ||
| test | ||
| .eslintrc.json | ||
| .gitignore | ||
| CODEOWNERS | ||
| LICENSE | ||
| README.md | ||
| package-lock.json | ||
| package.json | ||
| rollup.config.js | ||
| tsconfig.json | ||
README.md
<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.