JoyPixels Emoji Toolkit

https://github.com/joypixels/emoji-toolkit
Admin
JoyPixels Emoji Toolkit provides a set of libraries to convert native Unicode emojis to shortnames...
Tokens:15,361
Snippets:132
Trust Score:9.2
Update:1 month ago
Show doc for...
Tokens:
Raw
### NPM install emoji-toolkit

Source: https://github.com/joypixels/emoji-toolkit/blob/master/INSTALLATION.md

Install the emoji-toolkit package via NPM for JavaScript projects. This is a quick install alternative to the CDN approach.

```bash
> npm install emoji-toolkit
```

--------------------------------

### Install Composer dependencies

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/php/README.md

Run this command in the project root to load the necessary Composer packages before running tests or updating the client.

```bash
composer install
```

--------------------------------

### Compile SCSS with grunt

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/joypixels-awesome/README.md

After generating the mapping, install grunt and grunt-contrib-sass, then run grunt sass to compile the CSS. The output is placed in /extras/css/joypixels-awesome.css.

```bash
npm install grunt grunt-contrib-sass
grunt sass
```

--------------------------------

### Run tests

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/php/README.md

Executes the test suite after Composer packages are installed. Validates library methods and ruleset data.

```bash
composer tests
```

--------------------------------

### Composer require joypixels/emoji-toolkit

Source: https://github.com/joypixels/emoji-toolkit/blob/master/INSTALLATION.md

Install the emoji-toolkit package via Composer for PHP projects. This is a quick install alternative to the CDN approach.

```bash
$ composer require joypixels/emoji-toolkit
```

--------------------------------

### Meteor add joypixels:emoji-toolkit

Source: https://github.com/joypixels/emoji-toolkit/blob/master/INSTALLATION.md

Add the emoji-toolkit package to a Meteor project. This is a quick install alternative to the CDN approach.

```bash
meteor add joypixels:emoji-toolkit
```

--------------------------------

### JSON format for emoji alpha codes

Source: https://github.com/joypixels/emoji-toolkit/blob/master/extras/alpha-codes/README.md

Example of the JSON structure for emoji alpha codes, showing the primary alpha code and aliases for each unicode code point.

```json
{
    "1f600": {
        "output": "1f601",
        "name": "grinning face",
        "alpha_code": ":grinning:",
        "aliases": ""
    },
    "1f642": {
        "output": "1f642",
        "name": "slightly smiling face",
        "alpha_code": ":slight_smile:",
        "aliases": ":slightly_smiling_face:"
    },
    "1f36e": {
        "output": "1f46e",
        "name": "custard",
        "alpha_code": ":custard:",
        "aliases": ":pudding:|:flan:"
    }
}
```

--------------------------------

### Size modifiers: jpa-sm, jpa-med, jpa-lg

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/joypixels-awesome/README.md

Additional classes allow you to modify the size of the emoji. The example shows small, medium, and large variants of the coffee emoji.

```html
<!-- Coffee Emoji (small) -->
<i class="jpa-coffee jpa-sm"></i>

<!-- Coffee Emoji (medium) -->
<i class="jpa-coffee jpa-med"></i>

<!-- Coffee Emoji (large) -->
<i class="jpa-coffee jpa-lg"></i>
```

--------------------------------

### Generate mapping with node generate.js

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/joypixels-awesome/README.md

Run these commands from the lib/joypixels-awesome directory to generate the mapping used by the SCSS compilation.

```bash
cd lib/joypixels-awesome
node generate.js
```

--------------------------------

### Compile SCSS from repository root

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/joypixels-awesome/README.md

Alternative commands to compile the SCSS from the root of the emoji-toolkit repository.

```bash
npm install
npm run grunt sass
```

--------------------------------

### Convert Shortnames to Images with shortnameToImage

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/PHP.md

Converts shortnames in user input to images. Requires the PHP library and a Client instance. Optionally set imagePathPNG to host images locally; defaults to jsdelivr's free CDN.

```php
namespace JoyPixels;

// include the PHP library (if not autoloaded)
require __DIR__ . '/lib/php/autoload.php';

$client = new Client(new Ruleset());

// ###############################################
// if you want to host the images somewhere else
// you can easily change the default paths
$client->imagePathPNG = './../assets/png/'; // defaults to jsdelivr's free CDN
// ###############################################

if(isset($_POST['inputText'])) {
	echo $client->shortnameToImage($_POST['inputText']);
}
```

--------------------------------

### Live Preview with jQuery and joypixels.toImage

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

Provides a live preview of emoji conversion as the user types in an input field. It listens for keyup, change, and input events on #inputText, converts the current value using joypixels.toImage(), and updates #outputText with the result. Requires jQuery and the JoyPixels library.

```javascript
$(document).ready(function() {
	$("#inputText").on('keyup change input',function(e) {
	  var source = $('#inputText').val();
	  var preview = joypixels.toImage(source);
	  $('#outputText').html(preview);
	});
});
```

--------------------------------

### Enable PNG Sprite Mode (PHP)

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

Enable PNG sprite mode in the PHP configuration by setting the sprites property on the client instance.

```php
$client = new Client(new Ruleset());
$client->sprites = true;
```

--------------------------------

### Convert shortnames to images with joypixels.shortnameToImage()

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/JAVASCRIPT.md

Use this when your text contains only shortnames and you want to display them as emoji images. The function returns the converted HTML for setting into an element. The snippet pairs with the HTML button onclick calling convert().

```html
<input type="button" value="Convert" onclick="convert()"/>
```

```javascript
function convert() {
	var input = document.getElementById('inputText').value;
	var output = joypixels.shortnameToImage(input);
	document.getElementById('outputText').innerHTML = output;
}
```

--------------------------------

### CDN script and stylesheet links for emoji-toolkit

Source: https://github.com/joypixels/emoji-toolkit/blob/master/INSTALLATION.md

Add these script and stylesheet links to the head of your webpage to load the JoyPixels emoji toolkit from the JSDelivr CDN. The script provides the JavaScript API and the stylesheet supplies the CSS needed for emoji rendering.

```html
<script src="https://cdn.jsdelivr.net/npm/emoji-toolkit@11.0.0/lib/js/joypixels.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-toolkit@11.0.0/extras/css/joypixels.min.css"/>
```

--------------------------------

### Convert Shortnames to Native Unicode with shortnameToUnicode

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/PHP.md

Converts shortnames back to native unicode emoji characters. Requires the PHP library and a Client instance.

```php
namespace JoyPixels;

// include the PHP library (if not autoloaded)
require __DIR__ . '/lib/php/autoload.php';

$client = new Client(new Ruleset());

if(isset($_POST['inputText'])) {
	echo $client->shortnameToUnicode($_POST['inputText']);
}
```

--------------------------------

### HTML Output For Shortname Alt

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

HTML output after setting unicodeAlt to false, showing the shortname as the alt attribute.

```html
<p id="example-png">
	PNG: Hello world! <img class="joypixels" alt=":smile:" title=":smile:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f604.png">
</p>
```

--------------------------------

### Javascript For Shortname Alt

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

JavaScript code to turn off unicodeAlt and convert the HTML content of #example-png to images with shortname alt text.

```javascript
$(document).ready(function() {
	// turn unicode alternate text off
	joypixels.unicodeAlt = false;
	
	var input = $('#example-png').html();
	var replaced = joypixels.toImage(input);
	$('#example-png').html(replaced);
});
```

--------------------------------

### Convert shortnames to native unicode with joypixels.shortnameToUnicode()

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/JAVASCRIPT.md

Converts shortnames back to native unicode emoji characters. The snippet uses a text input and outputs to an HTML element.

```javascript
function convert() {
	var input = document.getElementById('inputText').value;
	var output = joypixels.shortnameToUnicode(input);
	document.getElementById('outputText').innerHTML = output;
}
```

--------------------------------

### Attach Sprite CSS Stylesheet

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

Link the JoyPixels sprite stylesheet in the HTML head. Ensure the accompanying sprite PNG files are in the same directory or update the CSS path accordingly.

```html
<link rel="stylesheet" href="path/to/joypixels.sprites.css"/>
```

--------------------------------

### shortnameToImage converts multiple shortnames

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

Tests the shortnameToImage method by converting a string with multiple shortnames to image tags. The expected output shows each shortname replaced with an img element using the CDN URL.

```javascript
assert.equal(joypixels.shortnameToImage(":dancer::dancer::alien:"), '<img class="joypixels" alt="💃" title=":dancer:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f483.png"/><img class="joypixels" alt="💃" title=":dancer:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f483.png"/><img class="joypixels" alt="👽" title=":alien:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f47d.png"/>'); });
```

--------------------------------

### Enable PNG Sprite Mode (JavaScript)

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

Enable PNG sprite mode in the JavaScript configuration by setting the sprites property to true.

```javascript
joypixels.sprites = true;
```

--------------------------------

### QUnit tests for joypixels emoji conversion methods

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

QUnit test suite covering joypixels conversion methods: toImage, unifyUnicode, shortnameToUnicode, and shortnameToImage. Each test asserts expected output for various emoji inputs, including mixed unicode and shortnames, multiline strings, and edge cases like shared colons.

```javascript
QUnit.module("toImage"); QUnit.test( "test toImage", function( assert ) { assert.equal(joypixels.toImage("Hello world! 😄 :smile:"), 'Hello world! <img class="joypixels" alt="😄" title=":smile:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f604.png"/> <img class="joypixels" alt="😄" title=":smile:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f604.png"/>'); }); QUnit.test( "mixed ascii, regular unicode and duplicate emoji", function( assert ) { assert.equal(joypixels.toImage(":alien: is 👽 and 저 is not :alien: or :alien: also :randomy: is not emoji"), '<img class="joypixels" alt="👽" title=":alien:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f47d.png"/> is <img class="joypixels" alt="👽" title=":alien:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f47d.png"/> and 저 is not <img class="joypixels" alt="👽" title=":alien:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f47d.png"/> or <img class="joypixels" alt="👽" title=":alien:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f47d.png"/> also :randomy: is not emoji'); }); QUnit.module("unifyUnicode"); QUnit.test( "test unifyUnicode", function( assert ) { assert.equal(joypixels.unifyUnicode("Hello world! 😄 :smile:"), 'Hello world! 😄 😄'); }); QUnit.test( "mixed ascii, regular unicode and duplicate emoji", function( assert ) { assert.equal(joypixels.unifyUnicode(":alien: is 👽 and 저 is not :alien: or :alien: also :randomy: is not emoji"), '👽 is 👽 and 저 is not 👽 or 👽 also :randomy: is not emoji'); }); QUnit.test( "multiline emoji string", function( assert ) { assert.equal(joypixels.unifyUnicode(":dancer:\\n:dancer:"), '💃\\n💃'); }); QUnit.test( "triple emoji string", function( assert ) { assert.equal(joypixels.unifyUnicode(":dancer::dancer::alien:"), '💃💃👽'); }); QUnit.module("shortnameToUnicode"); QUnit.test( "single unicode character conversion", function( assert ) { assert.equal(joypixels.shortnameToUnicode("Hello world! 😄 :smile:"), 'Hello world! 😄 😄'); }); QUnit.test( "shortname at start of sentence with apostrophe", function( assert ) { assert.equal(joypixels.shortnameToUnicode(":snail:'s are cool!"), '🐌\'s are cool!'); }); QUnit.test( "shortname shares a colon", function( assert ) { assert.equal(joypixels.shortnameToUnicode(":invalid:snail:"), ':invalid🐌'); }); QUnit.test( "mixed ascii, regular unicode and duplicate emoji", function( assert ) { assert.equal(joypixels.shortnameToUnicode(":alien: is 👽 and 저 is not :alien: or :alien: also :randomy: is not emoji"), '👽 is 👽 and 저 is not 👽 or 👽 also :randomy: is not emoji'); }); QUnit.test( "multiline emoji string", function( assert ) { assert.equal(joypixels.shortnameToUnicode(":dancer:\\n:dancer:"), '💃\\n💃'); }); QUnit.test( "triple emoji string", function( assert ) { assert.equal(joypixels.shortnameToUnicode(":dancer::dancer::alien:"), '💃💃👽'); }); QUnit.module("shortnameToImage"); QUnit.test( "single shortname character conversion", function( assert ) { assert.equal(joypixels.shortnameToImage("Hello world! 😄 :smile:"), 'Hello world! 😄 <img class="joypixels" alt="😄" title=":smile:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f604.png"/>'); }); QUnit.test( "shortname at start of sentence with apostrophe", function( assert ) { assert.equal(joypixels.shortnameToImage(":snail:'s are cool!"), '<img class="joypixels" alt="🐌" title=":snail:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f40c.png"/>\'s are cool!'); }); QUnit.test( "shortname shares a colon", function( assert ) { assert.equal(joypixels.shortnameToImage(":invalid:snail:"), ':invalid<img class="joypixels" alt="🐌" title=":snail:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f40c.png"/>'); }); QUnit.test( "mixed ascii, regular unicode and duplicate emoji", function( assert ) { assert.equal(joypixels.shortnameToImage(":alien: is 👽 and 저 is not :alien: or :alien: also :randomy: is not emoji"), '<img class="joypixels" alt="👽" title=":alien:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f47d.png"/> is 👽 and 저 is not <img class="joypixels" alt="👽" title=":alien:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f47d.png"/> or <img class="joypixels" alt="👽" title=":alien:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f47d.png"/> also :randomy: is not emoji'); }); QUnit.test( "multiline emoji string", function( assert ) { assert.equal(joypixels.shortnameToImage(":dancer:\\n:dancer:"), '<img class="joypixels" alt="💃" title=":dancer:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f483.png"/>\\n<img class="joypixels" alt="💃" title=":dancer:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f483.png"/>'); }); QUnit.test( "triple emoji string", function( assert ) { assert.equal(joypixels.shortnameToImage(":dancer::dancer::alien:"), '<img class="joypixels" alt="💃" title=":dancer:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f483.png"/><img class="joypixels" alt="💃" title=":dancer:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f483.png"/><img class="joypixels" alt="👽" title=":alien:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f47d.png"/>'); });
```

--------------------------------

### Convert native unicode emoji and shortnames with joypixels.toImage()

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/JAVASCRIPT.md

This shorthand for unicodeToImage and shortnameToImage processes mixed text, converting native unicode first, then shortnames. Useful for a live preview where input contains both types.

```html
<input type="button" value="Convert" onclick="convert()"/>
```

```javascript
function convert() {
	var input = document.getElementById('inputText').value;
	var output = joypixels.toImage(input);
	document.getElementById('outputText').innerHTML = output;
}
```

--------------------------------

### Convert Native Unicode Emoji to Shortnames with toShort

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/PHP.md

Converts native unicode emoji to shortnames, recommended for unifying user input. Requires the PHP library and a Client instance.

```php
namespace JoyPixels;

// include the PHP library (if not autoloaded)
require __DIR__ . '/lib/php/autoload.php';

$client = new Client(new Ruleset());

if(isset($_POST['inputText'])) {
  echo $client->toShort($_POST['inputText']);
}
```

--------------------------------

### Enable ASCII Smileys and Convert Shortnames

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

Enables ASCII smiley conversion in the JavaScript toolkit by setting joypixels.ascii to true (default is false). The convert() function reads input from an element with id 'inputText', converts shortnames to images using joypixels.shortnameToImage(), and writes the result to 'outputText'. Note that enabling this feature may cause unwanted conversions in regular text.

```javascript
joypixels.ascii = true; // (default: false)

// to enable ASCII conversion in the PHP toolkit you would do:
// JoyPixels::$ascii = true;

function convert() {
	var input = document.getElementById('inputText').value;
	var output = joypixels.shortnameToImage(input);
	document.getElementById('outputText').innerHTML = output;
}
```

--------------------------------

### Update Client.php Unicode regex

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/php/README.md

Runs the Client.php update script to generate a new $unicodeRegexp value. Note: this script will modify and overwrite the current file.

```bash
composer update-client
```

--------------------------------

### Convert Mixed Emoji and Shortnames to Images with toImage

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/PHP.md

Converts native unicode emoji and shortnames directly to images. Shorthand for shortnameToImage, useful for mixed input from databases. Requires the PHP library and a Client instance.

```php
namespace JoyPixels;

// include the PHP library (if not autoloaded)
require __DIR__ . '/lib/php/autoload.php';

$client = new Client(new Ruleset());

// ###############################################
// if you want to host the images somewhere else
// you can easily change the default paths
$client->imagePathPNG = './../assets/png/'; // defaults to jsdelivr's free CDN
// ###############################################

if(isset($_POST['inputText'])) {
	echo $client->toImage($_POST['inputText']);
}
```

--------------------------------

### Custom Javascript for Shortname AutoComplete

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

JavaScript for setting up jquery-textcomplete on textareas with an emoji strategy. Requires jQuery, jquery-textcomplete, and the emoji_strategy.json contents pasted into the emojiStrategy variable.

```javascript
// emoji strategy for .textcomplete() (latest version available in our repo: emoji_strategy.json)
var emojiStrategy = PASTE THE CONTENTS OF emoji_strategy.json HERE;

$(document).ready(function() {

    $("textarea").textcomplete([ {
        match: /\B:([\-+\w]*)$/,
        search: function (term, callback) {
            var results = [];
            var results2 = [];
            var results3 = [];
            $.each(emojiStrategy,function(unicode,data) {
                if(unicode.indexOf(term) > -1) { results.push(emojiStrategy[unicode].shortname); }
                else {
                    if((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
                        results2.push(shortname);
                    }
                    else if((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
                        results3.push(shortname);
                    }
                }
            });

            if(term.length >= 3) {
                results.sort(function(a,b) { return (a.length > b.length); });
                results2.sort(function(a,b) { return (a.length > b.length); });
                results3.sort();
            }
            var newResults = results.concat(results2).concat(results3);

            callback(newResults);
        },
        template: function (shortname) {
            return '<img class="joypixels" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/'+unicode+'.png"/> :'+emojiStrategy[shortname].unicode+':';
        },
        replace: function (shortname) {
            return ':'+shortname+': ';
        },
        index: 1,
        maxCount: 10
    }
    ],{
        footer: ''
    });
});
```

--------------------------------

### Custom CSS for Shortname AutoComplete

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

CSS styles for the autocomplete dropdown menu, including hover states and footer styling.

```css
/* AutoComplete styles for Emoji One */

.dropdown-menu {
  list-style: none;
  padding: .3em 0 0;
  margin: 0;
  border: 1px solid #6E6E6E;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
  font-size: inherit;
  letter-spacing: .025em;
  box-shadow: 3px 3px 3px rgba(0,0,0,.2);
}
.dropdown-menu a:hover {
  cursor: pointer;
}
.dropdown-menu li {
  letter-spacing: 0;
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  border:none;
}
.dropdown-menu li:before {
  display: none;
}
.dropdown-menu .textcomplete-footer {
  margin-top: .3em;
  background: #e6e6e6;
}
.dropdown-menu .textcomplete-footer a {
  color: #999999;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 2.1818em;
  padding-left: 1.8181em;
  font-size: .84em;
}
.dropdown-menu .textcomplete-footer .arrow {
  margin-left: .8em;
  font-size: 1.3em;
}
.dropdown-menu li .joypixels {
  vertical-align: middle;
  font-size: 1.23em;
  width: 1em;
  height: 1em;
  top: -1px;
  margin: 0 .3em 0 0;
}
.dropdown-menu li a {
  display: block;
  height: 100%;
  line-height: 1.8em;
  padding: 0 1.54em 0 .615em;
  color: #4f4f4f;
}
.dropdown-menu .active,
.dropdown-menu li:hover {
  background: #6E6E6E;
  color: white;
}
.dropdown-menu .active a,
.dropdown-menu li:hover a {
  color: inherit;
}
```

--------------------------------

### Convert native unicode emoji to shortnames with joypixels.toShort()

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/JAVASCRIPT.md

Use this to unify user input by replacing native unicode emoji with their corresponding shortnames. The HTML button triggers the convert() function.

```html
<input type="button" value="Convert" onclick="convert()"/>
```

```javascript
function convert() {
	var input = document.getElementById('inputText').value;
	var output = joypixels.toShort(input);
	document.getElementById('outputText').innerHTML = output;
}
```

--------------------------------

### Meteor Template Helper Inline

Source: https://github.com/joypixels/emoji-toolkit/blob/master/USAGE.md

Use the joypixels helper to convert a specific shortname inline within a template.

```handlebars
My emoji {{> joypixels ':beers:'}} text.
```

--------------------------------

### Meteor Template Helper Block

Source: https://github.com/joypixels/emoji-toolkit/blob/master/USAGE.md

Use the joypixels block helper to convert shortnames within a block of text.

```handlebars
{{#joypixels}}My emoji :beers: text.{{/joypixels}}
```

--------------------------------

### Swift Emoji Transformation

Source: https://github.com/joypixels/emoji-toolkit/blob/master/USAGE.md

Transform a string containing shortnames into JoyPixels images using the Swift library.

```swift
Joypicels.transform(string: "Rocket.Chat: :rocket:")
```

--------------------------------

### HTML Output (default) for unicodeAlt

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

Default HTML output when unicodeAlt is true (default), showing the native unicode emoji as the alt attribute.

```html
<p id="example-png">
	PNG: Hello world! <img class="joypixels" alt="😄" title=":smile:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f604.png">
</p>
```

--------------------------------

### toShort converts single unicode character

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

Tests the toShort method with a single unicode character and a shortname. The unicode emoji is converted to its shortname, while the existing shortname remains unchanged.

```javascript
assert.equal(joypixels.toShort("Hello world! 😄 :smile:"), 'Hello world! :smile: :smile:');
```

--------------------------------

### toShort handles mixed ASCII and unicode

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

Tests toShort with mixed ASCII, regular unicode, and duplicate emoji. All unicode emoji are converted to their shortnames, while ASCII text and non-emoji characters remain unchanged.

```javascript
assert.equal(joypixels.toShort("👽 is not :alien: and 저 is not 👽 or 👽"), ':alien: is not :alien: and 저 is not :alien: or :alien:');
```

--------------------------------

### Basic usage: Coffee Emoji

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/joypixels-awesome/README.md

Use the jpa-coffee class to display a coffee emoji. This is the simplest way to include an emoji on a page without scripting.

```html
<!-- Coffee Emoji -->
<i class="jpa-coffee"></i>
```

--------------------------------

### Convert Emoji in HTML Elements with .convert-emoji Class

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

Converts native unicode emoji and shortnames to images on any element with class .convert-emoji after page load. The jQuery snippet iterates over each element, converts its HTML using joypixels.toImage(), and replaces the content. The HTML input shows the original markup (note the missing equals sign in the class attribute), and the HTML output shows the converted result with img tags. Requires jQuery and the JoyPixels library.

```javascript
$(document).ready(function() {
	$(".convert-emoji").each(function() {
		var original = $(this).html();
		// use .shortnameToImage if only converting shortnames (for slightly better performance)
		var converted = joypixels.toImage(original);
		$(this).html(converted);
	});
});
```

```html
<p class"convert-emoji">
    Welcome to this JoyPixels :snail: demo! 😄
    I hope you like what we've put together here for you. :thumbsup: :smile:
</p>
```

```html
<p class="convert-emoji">
	Welcome to this JoyPixels <img class="joypixels" alt="🐌" title=":snail:" src="./assets/png/1f40c.png"> demo! <img class="joypixels" alt="😄" title=":smile:" src="./assets/png/1f604.png">
	I hope you like what we've put together here for you. <img class="joypixels" alt="👍" title=":thumbsup:" src="./assets/png/1f44d.png"> <img class="joypixels" alt="😄" title=":smile:" src="./assets/svg/1f604.png">
</p>
```

--------------------------------

### Shortname Rename Mapping (Previous to New)

Source: https://github.com/joypixels/emoji-toolkit/blob/master/extras/alpha-codes/CHANGELOG.md

CSV-style list mapping previous shortnames to new primary alpha codes, introduced in the JoyPixels 3.0 update. The old shortnames were moved to the ':aliases:' column.

```csv
Previous Shortname,New Shortname

:golfer:,:person_golfing:

:man_with_turban:,:person_wearing_turban:

:man_with_turban_tone1:,:person_wearing_turban_tone1:

:man_with_turban_tone2:,:person_wearing_turban_tone2:

:man_with_turban_tone3:,:person_wearing_turban_tone3:

:man_with_turban_tone4:,:person_wearing_turban_tone4:

:man_with_turban_tone5:,:person_wearing_turban_tone5:

:man_with_gua_pi_mao:,:man_with_chinese_cap:

:man_with_gua_pi_mao_tone1:,:man_with_chinese_cap_tone1:

:man_with_gua_pi_mao_tone2:,:man_with_chinese_cap_tone2:

:man_with_gua_pi_mao_tone3:,:man_with_chinese_cap_tone3:

:man_with_gua_pi_mao_tone4:,:man_with_chinese_cap_tone4:

:man_with_gua_pi_mao_tone5:,:man_with_chinese_cap_tone5:

:dancers:,:people_with_bunny_ears_partying:

:runner:,:person_running:

:runner_tone1:,:person_running_tone1:

:runner_tone2:,:person_running_tone2:

:runner_tone3:,:person_running_tone3:

:runner_tone4:,:person_running_tone4:

:runner_tone5:,:person_running_tone5:

:walking:,:person_walking:

:walking_tone1:,:person_walking_tone1:

:walking_tone2:,:person_walking_tone2:

:walking_tone3:,:person_walking_tone3:

:walking_tone4:,:person_walking_tone4:

:walking_tone5:,:person_walking_tone5:

:haircut:,:person_getting_haircut:

:haircut_tone1:,:person_getting_haircut_tone1:

:haircut_tone2:,:person_getting_haircut_tone2:

:haircut_tone3:,:person_getting_haircut_tone3:

:haircut_tone4:,:person_getting_haircut_tone4:

:haircut_tone5:,:person_getting_haircut_tone5:

:massage:,:person_getting_massage:

:massage_tone1:,:person_getting_massage_tone1:

:massage_tone2:,:person_getting_massage_tone2:

:massage_tone3:,:person_getting_massage_tone3:

:massage_tone4:,:person_getting_massage_tone4:

:massage_tone5:,:person_getting_massage_tone5:

:shrug:,:person_shrugging:

:shrug_tone1:,:person_shrugging_tone1:

:shrug_tone2:,:person_shrugging_tone2:

:shrug_tone3:,:person_shrugging_tone3:

:shrug_tone4:,:person_shrugging_tone4:

:shrug_tone5:,:person_shrugging_tone5:

:face_palm:,:person_facepalming:

:face_palm_tone1:,:person_facepalming_tone1:

:face_palm_tone2:,:person_facepalming_tone2:

:face_palm_tone3:,:person_facepalming_tone3:

:face_palm_tone4:,:person_facepalming_tone4:

:face_palm_tone5:,:person_facepalming_tone5:

:wrestlers:,:people_wrestling:

:cop:,:police_officer:

:cop_tone1:,:police_officer_tone1:

:cop_tone2:,:police_officer_tone2:

:cop_tone3:,:police_officer_tone3:

:cop_tone4:,:police_officer_tone4:

:cop_tone5:,:police_officer_tone5:

:spy:,:detective:

:spy_tone1:,:detective_tone1:

:spy_tone2:,:detective_tone2:

:spy_tone3:,:detective_tone3:

:spy_tone4:,:detective_tone4:

:spy_tone5:,:detective_tone5:

:guardsman:,:guard:

:guardsman_tone1:,:guard_tone1:

:guardsman_tone2:,:guard_tone2:

:guardsman_tone3:,:guard_tone3:

:guardsman_tone4:,:guard_tone4:

:guardsman_tone5:,:guard_tone5:

:person_with_blond_hair:,:blond_haired_person:

:person_with_blond_hair_tone1:,:blond_haired_person_tone1:

:person_with_blond_hair_tone2:,:blond_haired_person_tone2:

:person_with_blond_hair_tone3:,:blond_haired_person_tone3:

:person_with_blond_hair_tone4:,:blond_haired_person_tone4:

:person_with_blond_hair_tone5:,:blond_haired_person_tone5:

:person_with_pouting_face:,:person_pouting:

:person_with_pouting_face_tone1:,:person_pouting_tone1:

:person_with_pouting_face_tone2:,:person_pouting_tone2:

:person_with_pouting_face_tone3:,:person_pouting_tone3:

:person_with_pouting_face_tone4:,:person_pouting_tone4:

:person_with_pouting_face_tone5:,:person_pouting_tone5:

:no_good:,:person_gesturing_no:

:no_good_tone1:,:person_gesturing_no_tone1:

:no_good_tone2:,:person_gesturing_no_tone2:

:no_good_tone3:,:person_gesturing_no_tone3:

:no_good_tone4:,:person_gesturing_no_tone4:

:no_good_tone5:,:person_gesturing_no_tone5:

:ok_woman:,:person_gesturing_ok:

:ok_woman_tone1:,:person_gesturing_ok_tone1:

:ok_woman_tone2:,:person_gesturing_ok_tone2:

:ok_woman_tone3:,:person_gesturing_ok_tone3

:ok_woman_tone4:,:person_gesturing_ok_tone4

:ok_woman_tone5:,:person_gesturing_ok_tone5
```

--------------------------------

### toShort converts alias to canonical shortname

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

Tests toShort with an alias vs canonical shortname. The flag emoji is converted to its canonical shortname with an escaped underscore.

```javascript
assert.equal(joypixels.toShort("🇯🇵 どうもありがとう"), ':flag\_jp: どうもありがとう');
```

--------------------------------

### toImage handles shortname sharing a colon

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

Tests toImage when a shortname shares a colon with an invalid shortname. Only the valid shortname is converted, leaving the invalid part as text.

```javascript
assert.equal(joypixels.toImage(":invalid:snail:"), ':invalid<img class="joypixels" alt="🐌" title=":snail:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f40c.png"/>');
```

--------------------------------

### toImage converts single character shortname

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

Tests toImage with a single character shortname conversion. Both the unicode emoji and the shortname are converted to image tags.

```javascript
assert.equal(joypixels.toImage("Hello world! 😄 :smile:"), 'Hello world! <img class="joypixels" alt="😄" title=":smile:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f604.png"/> <img class="joypixels" alt="😄" title=":smile:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f604.png"/>');
```

--------------------------------

### CSV header for emoji alpha codes

Source: https://github.com/joypixels/emoji-toolkit/blob/master/extras/alpha-codes/README.md

Header row for the CSV file containing emoji alpha codes, with columns for unicode, output, name, alpha_code, and aliases.

```csv
“unicode”, "output", “name”, "alpha_code”, “aliases”
```

--------------------------------

### toShort converts unicode inside excluded tag

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

Tests toShort with a unicode character inside an excluded HTML tag. The emoji is converted to its shortname while the HTML tags remain unchanged.

```javascript
assert.equal(joypixels.toShort("<div>😄</div>"), '<div>:smile:</div>');
```

--------------------------------

### PNG Sprite HTML Markup

Source: https://github.com/joypixels/emoji-toolkit/blob/master/examples/OTHER.md

HTML markup for a PNG sprite using the unicode symbol 1F433. The class includes the size (32) and category (nature).

```html
<span class="joypixels joypixels-32-nature _1f433">
  &#x1f433;
</span>
```

--------------------------------

### toShort preserves newlines in multiline string

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

Tests toShort with a multiline emoji string. The newline character is preserved and each emoji is converted to its shortname.

```javascript
assert.equal(joypixels.toShort("💃\n💃"), ':dancer:\n:dancer:');
```

--------------------------------

### toImage converts single unicode character

Source: https://github.com/joypixels/emoji-toolkit/blob/master/lib/js/tests/tests.html

Tests toImage with a single unicode character. The emoji is converted to an image tag with the appropriate alt, title, and src attributes.

```javascript
assert.equal(joypixels.toImage("🐌"), '<img class="joypixels" alt="🐌" title=":snail:" src="https://cdn.jsdelivr.net/joypixels/assets/11.0/png/unicode/32/1f40c.png"/>');
```
Tokens:
Raw