npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@teamwork/emojione

v3.0.1

Published

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.

Downloads

16

Readme

#EmojiOne Logo EmojiOne Build Status

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.

The Idea

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, it is recommended that you store 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 are Shortnames?

Shortnames are semi-standardized human-readable identifiers for each emoji icon. Many online web applications will accept these shortnames as alternatives for the actual unicode character. We've compiled the full list over at emoji.codes with quick copy & search functions.

Installation

We've teamed up with JSDelivr to provide a simple way to install these emoji on any javascript-enabled website. Add the following script and stylesheet links to the head of your webpage:

<script src="https://cdn.jsdelivr.net/emojione/2.2.7/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/emojione/2.2.7/assets/css/emojione.min.css"/>

Alternatively, CDNjs is also available as a CDN Host for EmojiOne.

Quick installs can also be done using NPM and Bower (for the Javascript toolkit) or Composer (for the PHP toolkit).

NPM

> npm install emojione

Bower

> bower install emojione

Composer

$ composer require emojione/emojione

Meteor

meteor add emojione:emojione

Usage Examples

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.

Javascript Conversion

.toShort(str) - native unicode -> shortnames

This demo shows you how to take native unicode emoji input, such as that from your mobile device, and translate it to their corresponding shortnames. (we recommend this for database storage)

.shortnameToImage(str) - shortname -> images

This demo shows you how to take input containing only shortnames and translate it directly to EmojiOne images. (when displaying the unified input to clients)

.unicodeToImage(str) - native unicode -> images

This demo shows you how to take native unicode emoji input, such as that from your mobile device, and translate it directly to EmojiOne images. (would be great for a live editor preview)

.toImage(str) - native unicode + shortnames -> images (mixed input)

This demo shows you how to take input containing both native unicode emoji and shortnames, and translate it into EmojiOne images for display.

PHP Conversion

As of version 1.4.1 this library syntax has changed.

toShort($str) - native unicode -> shortnames

This demo shows you how to take native unicode emoji input, such as that from your mobile device, and translate it to their corresponding shortnames. (we recommend this for database storage)

shortnameToImage($str) - shortname -> images

This demo shows you how to take input containing only shortnames and translate it directly to EmojiOne images. (when displaying the unified input to clients)

unicodeToImage($str) - native unicode -> images

This demo shows you how to take native unicode emoji input, such as that from your mobile device, and translate it directly to EmojiOne images. (would be great for a live editor preview)

toImage($str) - native unicode + shortnames -> images (mixed input)

This demo shows you how to take input containing both native unicode emoji and shortnames, and translate it into EmojiOne images for display.

Note: As of version 1.4.1 the following implementation has been deprecated. It's included in the library for backwards compatibility but will be removed at a later date.

::toShort($str) - native unicode -> shortnames

This demo shows you how to take native unicode emoji input, such as that from your mobile device, and translate it to their corresponding shortnames. (we recommend this for database storage)

::shortnameToImage($str) - shortname -> images

This demo shows you how to take input containing only shortnames and translate it directly to EmojiOne images. (when displaying the unified input to clients)

::unicodeToImage($str) - native unicode -> images

This demo shows you how to take native unicode emoji input, such as that from your mobile device, and translate it directly to EmojiOne images. (would be great for a live editor preview)

::toImage($str) - native unicode + shortnames -> images (mixed input)

This demo shows you how to take input containing both native unicode emoji and shortnames, and translate it into EmojiOne images for display.

Meteor Conversion

Template helpers

My emoji {{> emojione ':beers:'}} text.

Or

{{#emojione}}My emoji :beers: text.{{/emojione}}

Swift Conversion

Emojione.transform(string: "Rocket.Chat: :rocket:")

Extras

shortnameToUnicode(str)

Change from shortnames to native unicode emoji.

Shortname Autocomplete

Easily add shortname autocomplete functionality to any text input on your page.

ASCII Smiley Conversion

With one quick step you can start converting common ASCII smileys to their corresponding images.

Alternate Alt Tags

Change from the native unicode emoji in the resulting alt tags to their shortnames instead.

Live Preview Box

Display converted Emoji in a preview box as the user is typing.

Conversion HTML Class

Stick a class of .emojione-convert on any HTML element and automatically convert native unicode emoji and/or shortnames to images after page load.

Convert on Form Submission

Converts unicode input to shortnames once the user submits the form.

Sprites (PNG)

With an additional CSS file you can use EmojiOne as resizable PNG sprites (up to 64x64).

Sprites (SVG)

This sprite method requires no extra CSS, and is infinitely resizable.

Other Considerations

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 possibilities 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.

Information

Bug reports

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.

  • https://github.com/Ranks/emojione/issues

Contact

If you have any questions, comments, or concerns you are welcome to contact us.

Alternatives

We sincerely hope that you choose to use EmojiOne and support our project, but if you feel like it's not for you, please have a look at these possible alternatives:

  • https://github.com/hassankhan/emojify.js
  • https://github.com/Genshin/PhantomOpenEmoji
  • https://github.com/iamcal/php-emoji
  • https://github.com/node-modules/emoji
  • https://github.com/steveklabnik/emoji
  • https://github.com/rockerhieu/emojicon
  • https://github.com/HenrikJoreteg/emoji-images
  • https://github.com/frissdiegurke/emoji-parser

Licenses

EmojiOne Artwork

  • Applies to all PNG and SVG files as well as any adaptations made.
  • The following applies to artwork included in EmojiOne GitHub libraries versions < 2.0.0.
  • License: Creative Commons Attribution-ShareAlike 4.0 International
  • Human Readable License: http://creativecommons.org/licenses/by-sa/4.0/
  • Complete Legal Terms: http://creativecommons.org/licenses/by-sa/4.0/legalcode
  • The following applies to artwork included in EmojiOne GitHub libraries versions >= 2.0.0.
  • License: Creative Commons Attribution 4.0 International
  • Human Readable License: http://creativecommons.org/licenses/by/4.0/
  • Complete Legal Terms: http://creativecommons.org/licenses/by/4.0/legalcode

EmojiOne Non-Artwork

  • Applies to: Javascript, JSON, PHP, CSS, HTML files, and everything else not covered under the artwork license above.
  • License: MIT
  • Complete Legal Terms: http://opensource.org/licenses/MIT