https://github.com/jakejarvis/imagemoji

🖼️ Replaces emojis in strings or DOM nodes with corresponding images
https://github.com/jakejarvis/imagemoji

dom emoji front-end html javascript npm twemoji unicode

Last synced: about 2 months ago
JSON representation

🖼️ Replaces emojis in strings or DOM nodes with corresponding images

• Host: GitHub
• URL: https://github.com/jakejarvis/imagemoji
• Owner: jakejarvis
• License: mit
• Created: 2021-11-10T15:12:40.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-24T07:07:59.000Z (almost 2 years ago)
• Last Synced: 2024-10-26T10:37:54.605Z (about 2 months ago)
• Topics: dom, emoji, front-end, html, javascript, npm, twemoji, unicode
• Language: TypeScript
• Homepage:
• Size: 385 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🖼️ imagemoji

[![CI](https://github.com/jakejarvis/imagemoji/actions/workflows/ci.yml/badge.svg)](https://github.com/jakejarvis/imagemoji/actions/workflows/ci.yml)

[![npm](https://img.shields.io/npm/v/imagemoji)](https://www.npmjs.com/package/imagemoji)

Replaces emojis in strings or DOM nodes with corresponding images of your choosing. A barebones, mostly drop-in replacement for Twemoji's [`twemoji.parse()`](https://github.com/twitter/twemoji#twemojiparse---v1) (and heavily cherry-picked from Twitter's [original script](https://github.com/twitter/twemoji/blob/master/scripts/build.js) to cut some cruft and save a few bytes).

## Usage

### via [unpkg](https://unpkg.com/browse/imagemoji/)

```html

  

    /* All inserted images have class="emoji" */

    img.emoji {

      width: 30px;

      height: 30px;

    }

  

  
I 💩 emoji!


  

  

    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>

  

```

### via [NPM](https://www.npmjs.com/package/imagemoji)

`npm install imagemoji` or `yarn add imagemoji`

```js

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 ``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](https://github.com/twitter/twemoji#cdn-support).

## License

MIT