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: about 1 month 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 6 years ago)
• Default Branch: main
• Last Pushed: 2024-09-27T10:15:18.000Z (about 1 month ago)
• Last Synced: 2024-09-30T00:05:50.815Z (about 1 month ago)
• Topics: custom-elements, emoji, web-components
• Language: JavaScript
• Homepage: https://github.github.io/g-emoji-element/examples/
• Size: 1.31 MB
• Stars: 136
• Watchers: 213
• Forks: 21
• Open Issues: 7
• 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.