https://github.com/github/g-emoji-element
Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.
https://github.com/github/g-emoji-element
custom-elements emoji web-components
Last synced: 11 months ago
JSON representation
Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.
- Host: GitHub
- URL: https://github.com/github/g-emoji-element
- Owner: github
- License: mit
- Created: 2018-07-25T18:07:35.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2025-03-05T22:18:24.000Z (about 1 year ago)
- Last Synced: 2025-04-01T05:32:25.784Z (12 months ago)
- Topics: custom-elements, emoji, web-components
- Language: JavaScript
- Homepage: https://github.github.io/g-emoji-element/examples/
- Size: 1.51 MB
- Stars: 138
- Watchers: 248
- Forks: 21
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
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
```js
import '@github/g-emoji-element'
```
```html
🦖
```
If a browser supports emoji, nothing happens. If a browser does not support emoji, a fallback image tag is created:
```html
```
### Skin tones
The `tone` attribute renders the emoji with a [skin tone modifier][scale] between 1-5. Use
0 to display the default tone.
[scale]: https://en.wikipedia.org/wiki/Fitzpatrick_scale
```html
👋
👋🏻
👋🏼
👋🏽
👋🏾
👋🏿
```
```js
> 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.
```html
🧑🏾<200d>🤝<200d>🧑🏿
```
## Browser support
Browsers without native [custom element support][support] require a [polyfill][].
- Chrome
- Firefox
- Safari
- Microsoft Edge
[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements
## Development
```
npm install
npm test
```
## License
Distributed under the MIT license. See LICENSE for details.