• Stars
    star
    16,575
  • Rank 1,580 (Top 0.04 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 9 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Emoji for everyone. https://twemoji.twitter.com/

Twitter Emoji (Twemoji) Build Status

A simple library that provides standard Unicode emoji support across all platforms.

Twemoji v14.0 adheres to the Unicode 14.0 spec and supports the Emoji 14.0 spec. We do not support custom emoji.

The Twemoji library offers support for all Unicode-defined emoji which are recommended for general interchange (RGI).

Usage

CDN Support

The folks over at MaxCDN have graciously provided CDN support.

MaxCDN is shut down right now, so in the meanwhile use a different CDN or download the assets. (See Maxcdn has shut down, cdn not working anymore. · Issue #580 · twitter/twemoji).

Use the following in the <head> tag of your HTML document(s):

<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>

This guarantees that you will always use the latest version of the library.

If, instead, you'd like to include the latest version explicitly, you can add the following tag:

<script src="https://unpkg.com/[email protected]/dist/twemoji.min.js" integrity="sha384-ICOlZarapRIX6UjKPcWKEpubjg7lGADN7Y9fYP4DU9zm0aPFhgnP5ef+XFaPyKv+" crossorigin="anonymous"></script>

Download

If instead you want to download a specific version, please look at the gh-pages branch, where you will find the built assets for both our latest and older versions.

API

Following are all the methods exposed in the twemoji namespace.

twemoji.parse( ... ) V1

This is the main parsing utility and has 3 overloads per parsing type.

Although there are two kinds of parsing supported by this utility, we recommend you use DOM parsing, explained below. Each type of parsing accepts a callback to generate an image source or an options object with parsing info.

The second kind of parsing is string parsing, explained in the legacy documentation here. This is unrecommended because this method does not sanitize the string or otherwise prevent malicious code from being executed; such sanitization is out of scope.

DOM parsing

If the first argument to twemoji.parse is an HTMLElement, generated image tags will replace emoji that are inside #text nodes only without compromising surrounding nodes or listeners, and completely avoiding the usage of innerHTML.

If security is a major concern, this parsing can be considered the safest option but with a slight performance penalty due to DOM operations that are inevitably costly.

var div = document.createElement('div');
div.textContent = 'I \u2764\uFE0F emoji!';
document.body.appendChild(div);

twemoji.parse(document.body);

var img = div.querySelector('img');

// note the div is preserved
img.parentNode === div; // true

img.src;        // https://twemoji.maxcdn.com/v/latest/72x72/2764.png
img.alt;        // \u2764\uFE0F
img.className;  // emoji
img.draggable;  // false

All other overloads described for string are available in exactly the same way for DOM parsing.

Object as parameter

Here's the list of properties accepted by the optional object that can be passed to the parse function.

  {
    callback: Function,   // default the common replacer
    attributes: Function, // default returns {}
    base: string,         // default MaxCDN
    ext: string,          // default ".png"
    className: string,    // default "emoji"
    size: string|number,  // default "72x72"
    folder: string        // in case it's specified
                          // it replaces .size info, if any
  }

callback

The function to invoke in order to generate image src(s).

By default it is a function like the following one:

function imageSourceGenerator(icon, options) {
  return ''.concat(
    options.base, // by default Twitter Inc. CDN
    options.size, // by default "72x72" string
    '/',
    icon,         // the found emoji as code point
    options.ext   // by default ".png"
  );
}

base

The default url is the same as twemoji.base, so if you modify the former, it will reflect as default for all parsed strings or nodes.

ext

The default image extension is the same as twemoji.ext which is ".png".

If you modify the former, it will reflect as default for all parsed strings or nodes.

className

The default class for each generated image is emoji. It is possible to specify a different one through this property.

size

The default asset size is the same as twemoji.size which is "72x72".

If you modify the former, it will reflect as default for all parsed strings or nodes.

folder

In case you don't want to specify a size for the image. It is possible to choose a folder, as in the case of SVG emoji.

twemoji.parse(genericNode, {
  folder: 'svg',
  ext: '.svg'
});

This will generate urls such https://twemoji.maxcdn.com/svg/2764.svg instead of using a specific size based image.

Utilities

Basic utilities / helpers to convert code points to JavaScript surrogates and vice versa.

twemoji.convert.fromCodePoint()

For a given HEX codepoint, returns UTF-16 surrogate pairs.

twemoji.convert.fromCodePoint('1f1e8');
 // "\ud83c\udde8"

twemoji.convert.toCodePoint()

For given UTF-16 surrogate pairs, returns the equivalent HEX codepoint.

 twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3');
 // "1f1e8-1f1f3"

 twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3', '~');
 // "1f1e8~1f1f3"

Tips

Inline Styles

If you'd like to size the emoji according to the surrounding text, you can add the following CSS to your stylesheet:

img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}

This will make sure emoji derive their width and height from the font-size of the text they're shown with. It also adds just a little bit of space before and after each emoji, and pulls them upwards a little bit for better optical alignment.

UTF-8 Character Set

To properly support emoji, the document character set must be set to UTF-8. This can be done by including the following meta tag in the document <head>

<meta charset="utf-8">

Exclude Characters (V1)

To exclude certain characters from being replaced by twemoji.js, call twemoji.parse() with a callback, returning false for the specific unicode icon. For example:

twemoji.parse(document.body, {
    callback: function(icon, options, variant) {
        switch ( icon ) {
            case 'a9':      // © copyright
            case 'ae':      // ® registered trademark
            case '2122':    // ™ trademark
                return false;
        }
        return ''.concat(options.base, options.size, '/', icon, options.ext);
    }
});

Legacy API (V1)

If you're still using our V1 API, you can read our legacy documentation here.

Contributing

The contributing documentation can be found here.

Attribution Requirements

As an open source project, attribution is critical from a legal, practical and motivational perspective in our opinion. The graphics are licensed under the CC-BY 4.0 which has a pretty good guide on best practices for attribution.

However, we consider the guide a bit onerous and as a project, will accept a mention in a project README or an 'About' section or footer on a website. In mobile applications, a common place would be in the Settings/About section (for example, see the mobile Twitter application Settings->About->Legal section). We would consider a mention in the HTML/JS source sufficient also.

Community Projects

Committers and Contributors

  • Justine De Caires (Twitter)
  • Jason Sofonia (Twitter)
  • Bryan Haggerty (ex-Twitter)
  • Nathan Downs (ex-Twitter)
  • Tom Wuttke (ex-Twitter)
  • Andrea Giammarchi (ex-Twitter)
  • Joen Asmussen (WordPress)
  • Marcus Kazmierczak (WordPress)

The goal of this project is to simply provide emoji for everyone. We definitely welcome improvements and fixes, but we may not merge every pull request suggested by the community due to the simple nature of the project.

The rules for contributing are available in the CONTRIBUTING.md file.

Thank you to all of our contributors.

License

Copyright 2019 Twitter, Inc and other contributors

Code licensed under the MIT License: http://opensource.org/licenses/MIT

Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/

More Repositories

1

the-algorithm

Source code for Twitter's Recommendation Algorithm
Scala
60,968
star
2

typeahead.js

typeahead.js is a fast and fully-featured autocomplete library
JavaScript
16,526
star
3

twemproxy

A fast, light-weight proxy for memcached and redis
C
12,000
star
4

the-algorithm-ml

Source code for Twitter's Recommendation Algorithm
Python
9,844
star
5

finagle

A fault tolerant, protocol-agnostic RPC system
Scala
8,742
star
6

hogan.js

A compiler for the Mustache templating language
JavaScript
5,143
star
7

labella.js

Placing labels on a timeline without overlap.
JavaScript
3,869
star
8

scala_school

Lessons in the Fundamentals of Scala
HTML
3,700
star
9

AnomalyDetection

Anomaly Detection with R
R
3,529
star
10

scalding

A Scala API for Cascading
Scala
3,467
star
11

twitter-text

Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.
HTML
3,051
star
12

TwitterTextEditor

A standalone, flexible API that provides a full-featured rich text editor for iOS applications.
Swift
2,950
star
13

opensource-website

Twitter's open source website, identifying projects we've released, organizations we support, and the work we do to support open source.
SCSS
2,918
star
14

util

Wonderful reusable code from Twitter
Scala
2,679
star
15

algebird

Abstract Algebra for Scala
Scala
2,284
star
16

finatra

Fast, testable, Scala services built on TwitterServer and Finagle
Scala
2,271
star
17

effectivescala

Twitter's Effective Scala Guide
HTML
2,241
star
18

summingbird

Streaming MapReduce with Scalding and Storm
Scala
2,136
star
19

pelikan

Pelikan is Twitter's unified cache backend
C
1,921
star
20

ios-twitter-image-pipeline

Twitter Image Pipeline is a robust and performant image loading and caching framework for iOS clients
C
1,851
star
21

twurl

OAuth-enabled curl for the Twitter API
Ruby
1,790
star
22

twitter-server

Twitter-Server defines a template from which services at Twitter are built
Scala
1,542
star
23

rezolus

Systems performance telemetry
Rust
1,541
star
24

activerecord-reputation-system

An Active Record Reputation System for Rails
Ruby
1,334
star
25

communitynotes

Documentation and source code powering Twitter's Community Notes
Python
1,319
star
26

compose-rules

Static checks to aid with a healthy adoption of Compose
Kotlin
1,311
star
27

fatcache

Memcache on SSD
C
1,301
star
28

rsc

Experimental Scala compiler focused on compilation speed
Scala
1,245
star
29

elephant-bird

Twitter's collection of LZO and Protocol Buffer-related Hadoop, Pig, Hive, and HBase code.
Java
1,137
star
30

cassovary

Cassovary is a simple big graph processing library for the JVM
Scala
1,039
star
31

Serial

Light-weight, fast framework for object serialization in Java, with Android support.
Java
988
star
32

hbc

A Java HTTP client for consuming Twitter's realtime Streaming API
Java
963
star
33

twemcache

Twemcache is the Twitter Memcached
C
925
star
34

innovators-patent-agreement

Innovators Patent Agreement (IPA)
919
star
35

vireo

Vireo is a lightweight and versatile video processing library written in C++11
C++
919
star
36

twitter-korean-text

Korean tokenizer
Scala
834
star
37

scrooge

A Thrift parser/generator
Scala
785
star
38

BreakoutDetection

Breakout Detection via Robust E-Statistics
C++
753
star
39

GraphJet

GraphJet is a real-time graph processing library.
Java
696
star
40

twitter-cldr-rb

Ruby implementation of the ICU (International Components for Unicode) that uses the Common Locale Data Repository to format dates, plurals, and more.
Ruby
667
star
41

bijection

Reversible conversions between types
Scala
657
star
42

chill

Scala extensions for the Kryo serialization library
Scala
607
star
43

ios-twitter-network-layer

Twitter Network Layer is a scalable and feature rich network layer built on top of NSURLSession for Apple platforms
Objective-C
573
star
44

hadoop-lzo

Refactored version of code.google.com/hadoop-gpl-compression for hadoop 0.20
Shell
544
star
45

storehaus

Storehaus is a library that makes it easy to work with asynchronous key value stores
Scala
464
star
46

rpc-perf

A tool for benchmarking RPC services
Rust
458
star
47

d3kit

D3Kit is a set tools to speed D3 related project development
JavaScript
429
star
48

scoot

Scoot is a distributed task runner, supporting both a proprietary API and Bazel's Remote Execution.
Go
347
star
49

twitter-cldr-js

JavaScript implementation of the ICU (International Components for Unicode) that uses the Common Locale Data Repository to format dates, plurals, and more. Based on twitter-cldr-rb.
JavaScript
345
star
50

scala_school2

Scala School 2
Scala
340
star
51

rustcommon

Common Twitter Rust lib
Rust
339
star
52

wordpress

The official Twitter plugin for WordPress. Embed Twitter content and grow your audience on Twitter.
PHP
310
star
53

ios-twitter-logging-service

Twitter Logging Service is a robust and performant logging framework for iOS clients
Objective-C
299
star
54

nodes

A library to implement asynchronous dependency graphs for services in Java
Java
246
star
55

SentenTree

A novel text visualization technique
JavaScript
226
star
56

interactive

Twitter interactive visualization
HTML
213
star
57

joauth

A Java library for authenticating HTTP Requests using OAuth
Java
211
star
58

thrift_client

A Thrift client wrapper that encapsulates some common failover behavior
Ruby
196
star
59

hpack

Header Compression for HTTP/2
Java
192
star
60

zktraffic

ZooKeeper protocol analyzer and stats gathering daemon
Python
165
star
61

twemoji-parser

A simple library for identifying emoji entities within a string in order to render them as Twemoji.
Scala
162
star
62

cache-trace

A collection of Twitter's anonymized production cache traces.
Shell
162
star
63

sbf

Java
159
star
64

tormenta

Scala extensions for Storm
Scala
132
star
65

whiskey

HTTP library for Android (beta)
Java
131
star
66

hraven

hRaven collects run time data and statistics from MapReduce jobs in an easily queryable format
Java
127
star
67

netty-http2

HTTP/2 for Netty
Java
120
star
68

sqrl

A Safe, Stateful Rules Language for Event Streams
TypeScript
100
star
69

ccommon

Cache Commons
C
99
star
70

focus

Focus aligns Git worktree content based on outlines of a repository's Bazel build graph. Focused repos are sparse, shallow, and thin and unlock markedly better performance in large repos.
Rust
91
star
71

dict_minimize

Access scipy optimizers from your favorite deep learning framework.
Python
77
star
72

metrics

76
star
73

twitter.github.io

HTML
71
star
74

go-bindata

Go
68
star
75

diffusion-rl

Python
66
star
76

birdwatch

64
star
77

cloudhopper-commons

Cloudhopper Commons
Java
57
star
78

twitter-cldr-npm

TwitterCldr npm package
JavaScript
49
star
79

.github

Twitter GitHub Organization-wide files
48
star
80

bazel-multiversion

Bazel rules to resolve, fetch and manage 3rdparty JVM dependencies with support for multiple parallel versions of the same dependency. Powered by Coursier.
Scala
47
star
81

libwatchman

A C interface to watchman
C
44
star
82

sslconfig

Twitter's OpenSSL Configuration
42
star
83

ios-twitter-apache-thrift

A thrift encoding and decoding library for Swift
Swift
41
star
84

gatekeeper-service

GateKeeper is a service built to automate the manual steps involved in onboarding, offboarding, and lost asset scenarios.
Python
36
star
85

dodo

The Twitter OSS Project Builder
Shell
35
star
86

repo-scaffolding

Tools for creating repos based on open source standards and best practices
33
star
87

iago2

A load generator, built for engineers
Scala
24
star
88

caladrius

Performance modelling system for Distributed Stream Processing Systems (DSPS) such as Apache Heron and Apache Storm
Python
22
star
89

ossdecks

Repository for Twitter Open Source Decks
10
star
90

curation-style-guide

Document Repository for Twitter's Curation Style Guide
10
star
91

analytics-infra-governance

Description of the process for how to commit, review, and release code to the Scalding OSS family (Scalding, Summingbird, Algebird, Bijection, Storehaus, etc)
9
star
92

gpl-commitment

Twitter's GPL Cooperation Commitment
5
star
93

second-control-probability-distributions

4
star
94

google-tag-manager-event-tag

Smarty
3
star
95

google-tag-manager-base-tag

Smarty
2
star