@github/g-emoji-element
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

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

    Keywords

    none

    Install

    npm i @github/g-emoji-element

    DownloadsWeekly Downloads

    205

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    20.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • jfuchs
    • githubbot
    • manuelpuyol
    • jonrohan
    • broccolini
    • mislav
    • mdo
    • primer-css
    • keithamus
    • mschoening
    • koddsson
    • emilybrick
    • lgarron
    • colebemis
    • smockle
    • simurai
    • khiga8
    • dustin.greif
    • srt32