# g-emoji-element

**Repository Path**: mirrors_github/g-emoji-element

## Basic Information

- **Project Name**: g-emoji-element
- **Description**: Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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
<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:

```html
<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][scale] between 1-5. Use
0 to display the default tone.

[scale]: https://en.wikipedia.org/wiki/Fitzpatrick_scale

```html
<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>
```

```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
<g-emoji tone="4 5">🧑🏾<200d>🤝<200d>🧑🏿</g-emoji>
```

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