JSPM

gemojify

0.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q42430F
  • License MIT

A bit of JS that replaces colon :emoji: in HTML with images

Package Exports

  • gemojify

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gemojify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Gemojify ⭐

A bit of JS that replaces colon :emoji: in HTML with images

Introduction

First off, a warning. This is my first JavaScript library, it's probably very broken!

This is a front-end library that replaces text inside colons with a span element of a particular CSS class that will fetch its corresponding emoji.

e.g. 😄 becomes smile emoji

The emoji scales to the size of the font, so emoji specified in <h1> tags will be larger than those in <p> tags.

Use in your project

Using NPM?

npm install gemojify

Or just download the repository from GitHub.

Copy the contents of the css, images and js directories into your project.

Inside your HTML, include a reference to css/gemojify.css and js/gemojify.js, and insert an element with the class gemojify.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/gemojify.css">
  </head>
  <body>
    <h1 class="gemojify">We ❤️ emoji!</h1>
    <p class="gemojify">👍 This paragraph will be processed 🎉</p>
    <p>This paragraph won't 😢</p>
    <script src="js/gemojify.js"></script>
  </body>
</html>

becomes

Colon emoji inside the gemojify class are converted to real emoji