Angular Twemoji    

A simple angular wrapper around the great twemoji project. It provides a twemojiProvider a directive and a filter.

Getting Started

1. Get angular-twemoji in one of the following ways:

• Download the production version or the development version
• via Bower: by running $ bower install angular-twemoji from your console

1. Include angular-twemoji.min.js (or angular-twemoji.js) in your index.html, after including Angular itself.
2. Get and include twemoji.min.js or twemoji.js running $ bower install twemoji.
3. Add sc.twemoji to your main module's list.

Example Usage:

In your index.html:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/twemoji/twemoji.js"></script>

<script src="bower_components/angular-twemoji/dist/angular-twemoji.js"></script>

In your app.js:

angular
    .module('myApp', [
        // ...
        'sc.twemoji'
    ]);

As directive

<ANY
  twemoji>
...
</ANY>

or

<twemoji>
...
</twemoji>

As filter

Since the output of twemoji(<any_string>) will contain <img/> tags you have to use ng-bind-html to make use of the filter.

<ANY ng-bind-html="exampleString | twemoji"></ANY>

As service

The wrapped twemoji.parse() is provided as a injectable service and can be used as follows:

app.controller('myCtrl', ['twemoji', function(twemoji) {
  $scope.html = twemoji('I \u2764\uFE0F emoji!');
}]);

Configuration

For the full documentation of all options please refer to twemoji. If you like to override the default configuration use the twemojiProvider as follows:

app.config('twemojiProvider', function(twemojiProvider) {
  twemojiProvider.setOptions({
    base: string,         // default MaxCDN
    ext: string,          // default ".png"
    className: string,    // default "emoji"
    size: string|number,  // default "36x36"
    folder: string,       // in case it's specified
                          // it replaces .size info, if any
    callback: function imageSourceGenrator(icon, options) {
      return ''.concat(
        options.base, // by default Twitter Inc. CDN
        options.size, // by default "36x36" string
        '/',
        icon,         // the found emoji as code point
        options.ext   // by default ".png"
      );
    }
  });
});

Further reading

See my blog post Twemojis with AngularJS.

Acknowledgments

Based on twemoji.

License

Copyright (c) 2014 Max Scheffler

MIT License