Yeah, this was an interesting project at the time, but browser emoji support has progressed faster than I've been able to maintain this repo. I'm not maintaining this repo right now. But who knows, maybe I'll pick it up again sometime.
Front-end library that replaces colon :emoji: with images
This is a front-end library that replaces text inside colons with an SVG image of its corresponding emoji. This means the output will look the same on all modern browsers (since unicode characters don't play nicely with Windows). It is also possible to add your own custom emoji to your site.
To find the right colon emoji to use, try emoji.muan.co. The images themselves were lovingly borrowed from Twitter's Twemoji repository and the emoji map file is from the Emoji One project.
e.g. :smile: becomes 
The emoji scales to the size of the font, so emoji specified in <h1> tags will be larger than those in <p> tags.
imojify() inside certain elementstitle and aria-label attributes for accessibilityupside_down_face.svgnpm run build instead of gulp build in instructionsUsing NPM or Bower?
npm install imojify
bower install imojify
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/imojify.css and js/imojify.js. Add an extra <script> tag that calls imojify(). If you use that function with no parameters, imojify() will process any HTML tags with the class imojify. Alternatively you can pass your own selector to the function e.g. imojify('h1') to process all <h1> tags, or imojify('#that-element') to process the element with id that-element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/imojify.css">
</head>
<body>
<h1 class="imojify">We :heart: emoji!</h1>
<p class="imojify">:thumbsup: This paragraph will be processed :tada:</p>
<p>This paragraph won't :cry:</p>
<script src="js/imojify.js"></script>
<script>
imojify(); // equivalent to imojify('.imojify')
</script>
</body>
</html>
becomes
If you have some elements within your source element that you don't want processed you can specify a selector to match all elements to ignore.
imojify('.imojify', { ignore: '.ignore-emoji' });
If you're one of those people who thinks "There is no such thing as too much emoji", you can add your own emoji, including animated GIFs!
npm installimages/emojis/custom folder, making sure their filenames without extensions don't clash*.npm run build. As if by magic, imojify.css should have been updated with your new images!demo.html references :upside_down_face: which is replaced by upside_down_face.svg from the custom folder. Note that if you include a file with the same name as a predefined emoji, the predefined emoji will be replaced.If you don't want to use node, you could also modify the CSS file manually.
*smile.png clashes with smile.gif (they would both be applied to the emoji-smile class)
Graphics (in images/emoji folder): Copyright 2014 Twitter, Inc and other contributors, licensed under CC-BY 4.0
emojimap.json is a modified version of Emoji One's emojis.json, MIT licensed
Everything else is either coded by me or my awesome contributors, also MIT licensed.
FAQs
Front-end library that replaces colon :emoji: with images
We found that imojify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A critical vm2 sandbox escape can allow untrusted JavaScript to break isolation and execute commands on the host Node.js process.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.