Replaces emojis in strings or DOM nodes with corresponding images of your choosing. A barebones, mostly drop-in replacement for Twemoji's twemoji.parse() (and heavily cherry-picked from Twitter's original script to cut some cruft and save a few bytes).

Usage

via unpkg

<html>
<head>
  <style>
    /* All inserted images have class="emoji" */
    img.emoji {
      width: 30px;
      height: 30px;
    }
  </style>
</head>
<body>
  <p>I 💩 emoji!</p>

  <script src="https://unpkg.com/imagemoji/dist/imagemoji.min.js"></script>
  <script>
    imagemoji.parse(document.body);
    //=> <p>I <img class="emoji" draggable="false" alt="💩" src="https://twemoji.maxcdn.com/v/latest/svg/1f4a9.svg"/> emoji!</p>

    imagemoji.parse(document.body, (icon) => `/assets/emoji/${icon}.png`);
    //=> <p>I <img class="emoji" draggable="false" alt="💩" src="/assets/emoji/1f4a9.png"/> emoji!</p>
  </script>
</body>
</html>

via NPM

npm install imagemoji or yarn add imagemoji

import { parse as parseEmoji } from "imagemoji";
// or...
// const parseEmoji = require("imagemoji").parse;

parseEmoji(document.body);
parseEmoji(document.body, (icon) => `https://cdn.example.com/emoji/${icon}.svg`);

API

.parse(what, how?)

what

Type: string or Node

Either a plain string or a DOM node (e.g. document.body) containing emojis to replace with <img>s.

how

Type: function
Default: (icon) => "https://twemoji.maxcdn.com/v/latest/svg/" + icon + ".svg"

A callback function to determine the image source URL of a given emoji codepoint (always lowercase, e.g. 1f4a9 for 💩, and variations are joined with dashes, e.g. 1f468-200d-1f4bb for 👨‍💻). Defaults to pulling SVGs from the Twemoji CDN.

License

MIT