Replace Emojis with Crisp SVG Images with Nomoji JS Library

Nomoji is a JavaScript library that replaces native text emojis with high-quality SVG images.

It uses Google’s Noto Emoji library to ensure consistent rendering across all platforms and devices. You just pass a string to the library, and it returns HTML with embedded SVG emoji elements instead of native emoji characters.

Features:

• HTML Sanitization: Built-in protection against XSS attacks by automatically escaping dangerous HTML characters in processed text.
• Customizable Path Prefix: Configure the SVG directory location to match your project structure and deployment setup.
• CSS Styling Control: Apply custom styles to all emoji images through a single .emoji class selector.
• Minimal Dependencies: Pure JavaScript implementation with no external runtime dependencies required.
• Comprehensive Coverage: Includes 3700+ SVG files covering the complete Unicode emoji specification, including country flags and complex emoji sequences.

How To Use It:

1. Install nomoji and import it into your project.

# NPM
$ npm install nomoji

import nomoji from 'nomoji';

2. The nomoji package includes a folder named svg containing all the emoji images. You need to copy this folder from node_modules/nomoji/ and place it in a publicly accessible directory on your web server.

For example, you might place it in your public or static assets folder.

3. Call the nomoji function with a text string containing emojis:

The function returns an HTML string with emoji characters replaced by img tags. Each emoji is converted to its unicode hex codepoint, which maps to the corresponding SVG filename.

const result = nomoji("Hello world! 😃 This is a test. 💻");

Hello world! <img draggable="false" class="emoji" src="svg/1f603.svg"> This is a test. <img draggable="false" class="emoji" src="svg/1f4bb.svg"></p>

4. The nomoji function accepts two optional parameters for more control.

• prefix (string, default: ''): Defines a path prefix for the SVG image sources. This is useful if you placed the svg folder in a subdirectory.
• disableSanitation (boolean, default: false): By default, nomoji sanitizes characters like < and > to prevent them from being rendered as HTML. Set this to true only if you trust the input source and need to render HTML mixed with emojis.

nomoji(text, [prefix], [disableSanitation])

5. The default styles make emojis match your text’s font size. You can override these properties to adjust sizing, spacing, or add effects like filters or transforms.

.emoji {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  margin: 0 0.05em;
}

The post Replace Emojis with Crisp SVG Images with Nomoji JS Library appeared first on CSS Script.