Emoji One is a complete set of emojis designed for the web. It includes libraries to easily convert unicode characters to shortnames (:smile:) and shortnames to our custom emoji images. PNG and SVG formats provided for the emoji images.
#
Emoji One
bringing you emojione.com & emoji.codes
The web's first and only complete open source emoji set. It is 100% free and super easy to integrate.
To standardize emoji on the web through the use of common :shortnames:.
When storing user inputted text in your database, say from a guestbook or through a CMS admin, you should always make sure you are storing text containing only :shortnames: and not Unicode emoji characters or emoji images. Then, when you are displaying that content to the user, you can convert it server-side with the PHP toolkit provided, or client-side using the Javascript toolkit which is also provided. Demos of this process using Javascript, jQuery, and PHP are included in the repo, and we have example code snippets below.
What Shortnames?
emoji.codes has a complete list of shortnames as well as quick copy & search functions.
The easiest, and preferred, method of installation is to use our CDN partner jsDelivr. You can hotlink our CSS and JS files. The toolkits we've provided will use the emoji images hosted on jsDelivr by default.
Quick installs can also be done using NPM (for the Javascript toolkit) or Composer (for the PHP tooklkit).
> npm install emojione
"require": { "emojione/emojione": "dev-master" }
Below there are some examples of how you will actually use the libraries to convert Unicode emoji characters to :shortnames: and :shortnames: to emoji images.
The basic flow is as follows:
Below is an example of a Javascript-only implemention of Emoji One.
Include the Javascript toolkit
<head>
<!-- include via jsDelivr (or download and host locally if you prefer) -->
<script src="//cdn.jsdelivr.net/emojione/1.1.0/lib/js/emojione.min.js" type="text/javascript"></script>
<!-- basic rules for styling the emoji images -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/1.1.0/assets/css/emojione.min.css" type="text/css" media="all" />
<script type="text/javascript">
// #################################################
// # Optional
// default is PNG but you may also use SVG
emojione.imageType = 'svg';
// default is ignore ASCII smileys like :) but you can easily turn them on
emojione.ascii = true;
// default is jsDelivr but you can also change the paths
// if you want to host the images somewhere else
emojione.imagePathPNG = './../images/png/';
emojione.imagePathSVG = './../images/svg/';
// #################################################
</script>
</head>
Before text is sent to your server, convert any Unicode emoji to shortnames:
<form onsubmit="convert();">
<textarea id="myTextarea">Hello World! 😄</textarea>
</form>
<script type="text/javascript">
function convert() {
// get the inputted text
var inputted = document.getElementById('myTextarea').value;
// convert to shortnames to standardize the text
var converted = emojione.toShort(inputted);
// update textarea with new text
document.getElementById('myTextarea').innerHTML = converted;
}
</script>
<div id="myContent">Hello World! :smile:</div>
<script type="text/javascript">
// get the standardized text
var inputted = document.getElementById('myContent').innerHTML;
// convert shortnames emoji images
var converted = emojione.toImage(inputted);
// update textarea with new text
document.getElementById('myContent').innerHTML = converted;
</script>
Below are some examples of things you can easily do with jQuery. It assumes that both our Javascript toolkit and jQuery are already included in your page.
Automatically convert form fields containing Unicode emoji to :shortnames:
<form id="myForm">
<input type="text" id="myInput" name="myInput"/>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#myForm").on('submit',function() {
var input = $('#myInput').val();
var replaced = emojione.toShort(input);
$('#myInput').val(replaced);
});
});
</script>
Easily convert :shortnames: in any HTML element by applying an identifying class like this:
<div class="emojione-convert">
I hope you like this Emoji One! :thumbsup:
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".emojione-convert").each(function() {
var original = $(this).html();
var converted = emojione.toImage(original);
$(this).html(converted);
});
});
</script>
Below is an example of a PHP only implemention of Emoji One.
# include the PHP toolkit (if not autoloaded)
require('Emojione.class.php');
# $string would normally be text submitted from a form
$string = 'Hello world! 😄';
# convert text to shortnames
$convertedString = Emojione::toShort($string);
###
# This is where you'd now store the standardized text in your database
###
# include the PHP toolkit (if not autoloaded)
require('Emojione.class.php');
################################################
# Optional:
# default is PNG but you may also use SVG
Emojione::$imageType = 'svg';
# default is ignore ASCII smileys like :) but you can easily turn them on
Emojione::$ascii = true;
# default is jsDelivr but you can also change the paths
# if you want to host the iamges somewhere else
Emojione::$imagePathPNG = './../images/png/';
Emojione::$imagePathSVG = './../images/svg/';
################################################
# $string would normally standardized text retrieve from your database
$string = 'Hello world! :smile:';
# convert shortnames to images
$convertedString = Emojione::toImage($string);
###
# This is where you'd now output the converted text to the browser
###
Character Encoding — UTF-8
If you're getting serious about implementing emoji into your website, you will want to consider your web stack's character encoding. You should make sure that all connection points are using the same encoding. There are a lot of options and configuration possibilies here, so you'll have to figure what works best for your own situation.
A quick Google search will bring up a lot of information on how to get your entire web stack to use UTF-8, which is needed to properly handle Unicode emoji.
To get you started, here's a nice guide: UTF-8: The Secret of Character Encoding.
If you discover any bugs, feel free to create an issue on GitHub. We also welcome the open-source community to contribute to the project by forking it and issuing pull requests.
If you have any questions, comments, or concerns you are welcome to contact us.
We sincerely hope that you choose to use Emoji One and support our project, but if you feel like it's not for you, please have a look at these possible alternatives:
FAQs
EmojiOne is a complete set of emojis designed for the web. It includes libraries to easily convert unicode characters to shortnames (:smile:) and shortnames to our custom emoji images. PNG formats provided for the emoji images.
The npm package emojione receives a total of 8,883 weekly downloads. As such, emojione popularity was classified as popular.
We found that emojione 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
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.