Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Guidelines for bug reports:
reported.

2. **Check if the issue has been fixed** — try to reproduce it using the
latest `master` or development branch in the repository.
latest `main` or development branch in the repository.

3. **Isolate the problem** — ideally create a reduced test
case and a live example.
Expand All @@ -25,7 +25,7 @@ Guidelines for bug reports:
## Feature requests & contribution enquiries

Feature requests are welcome. But take a moment to find out whether your idea
fits with the scope and aims of the project. It's up to *you* to make a strong
fits with the scope and aims of the project. It's up to _you_ to make a strong
case for the inclusion of your feature. Please provide as much detail and
context as possible.

Expand All @@ -43,7 +43,7 @@ If you'd like to test and/or contribute please follow these instructions.

```bash
# clone your fork
git clone -b master https://github.com/$YOUR_USERNAME/twemoji.git/
git clone https://github.com/$YOUR_USERNAME/twemoji.git
cd twemoji

# install dependencies
Expand All @@ -65,15 +65,15 @@ project:

1. Create a new topic branch to contain your feature, change, or fix:

> If you'd like to test and/or propose some changes to the latest library version please change the `./scripts/build.js` file at its end so that everything will be generated properly once launched.
> If you'd like to test and/or propose some changes to the latest library version please change the [./scripts/build.js](./scripts/build.js) file at its end so that everything will be generated properly once launched.

1. Commit your changes in logical chunks. Provide clear and explanatory commit
messages. Use git's [interactive rebase](https://help.github.com/en/articles/about-git-rebase)
feature to tidy up your commits before making them public.

2. Run `yarn prepublish`. This will do several things:
2. Run `yarn prepublishOnly`. This will do several things:

1. Ask for the version number (See: [SemVer](https://semver.org/))
1. Ask for the version number (See: [SemVer](https://semver.org))
2. Build the project and put the built assets in `dist/`
3. Run the tests
4. Move the contents of the `dist/` directory to the `gh-pages` branch
Expand All @@ -88,8 +88,8 @@ commits.

1. Push your topic branch up to your fork: `git push origin my-feature-branch`

2. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a
clear title and description. One for your changes in `master` and another one for
2. [Open a Pull Request](http://help.github.com/send-pull-requests) with a
clear title and description. One for your changes in `main` and another one for
your changes in `gh-pages`.

## License
Expand Down
23 changes: 12 additions & 11 deletions FOLDERS.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
# Folder Structure

| Top level | Second | Files | Description | Version |
|-----------|--------|-------|-------------|---------|
| . | | *.md, .* | meta data | 1.0, 2.2 |
| . | | twemoji*.js, *.js, [*.html](https://jdecked.github.io/twemoji/) | framework, preview | 1.0 |
| 1/ | | twemoji*.js | legacy framework | 1.0 |
| 2/ | | twemoji*.js | framework | 2.2 |
| 2/ | test/ | preview*.html, index.html, test.js | [static image preview HTML files](https://jdecked.github.io/twemoji/2/test/preview.html), ... | 2.2 |
| 2/ | 72x72/ | {codepoint}.png | large PNGs | 2.2 |
| 2/ | svg/ | {codepoint}.svg | SVGs | 2.2 |
| 16x16/ | | {codepoint}.png | small PNGs | 1.0 |
| 36x36/ | | {codepoint}.png | medium PNGs | 1.0 |
| 72x72/ | | {codepoint}.png | large PNGs | 1.0 |
| svg/ | | {codepoint}.svg | SVGs | 1.0 |
| `.` | | `*.md`, `.*` | metadata | 1.0, 2.2 |
| `.` | | `twemoji*.js`, `*.js`, [`*.html`](https://jdecked.github.io/twemoji/) | framework, preview | 1.0 |
| `1/` | | `twemoji*.js` | legacy framework | 1.0 |
| `2/` | | `twemoji*.js` | framework | 2.2 |
| `2/` | `test/` | `preview*.html`, `index.html`, `test.js` | [static image preview HTML files](https://jdecked.github.io/twemoji/2/test/preview.html), ... | 2.2 |
| `2/` | `72x72/` | `{codepoint}.png` | large PNGs | 2.2 |
| `2/` | `svg/` | `{codepoint}.svg` | SVGs | 2.2 |
| `16x16/` | | `{codepoint}.png` | small PNGs | 1.0 |
| `36x36/` | | `{codepoint}.png` | medium PNGs | 1.0 |
| `72x72/` | | `{codepoint}.png` | large PNGs | 1.0 |
| `svg/` | | `{codepoint}.svg` | SVGs | 1.0 |
75 changes: 38 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@

A simple library that provides standard Unicode [emoji](http://en.wikipedia.org/wiki/Emoji) support across all platforms.

**Twemoji v15.0** adheres to the [Unicode 15.0 spec](https://unicode.org/versions/Unicode15.0.0/) and supports the [Emoji 15.0 spec](https://www.unicode.org/reports/tr51/tr51-23.html). _We do not support custom emoji._
**Twemoji v15.0** adheres to the [Unicode 15.0 spec](https://unicode.org/versions/Unicode15.0.0) and supports the [Emoji 15.0 spec](https://www.unicode.org/reports/tr51/tr51-23.html). _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

Default CDN support is provided via [jsDelivr](https://www.jsdelivr.com/).
Default CDN support is provided via [jsDelivr](https://www.jsdelivr.com).

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

Expand All @@ -21,6 +21,7 @@ Use the following in the `<head>` tag of your HTML document(s):
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:

```html
<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@15.0.2/dist/twemoji.min.js" integrity="sha384-D6GSzpW7fMH86ilu73eB95ipkfeXcMPoOGVst/L04yqSSe+RTUY0jXcuEIZk0wrT" crossorigin="anonymous"></script>
```
Expand All @@ -45,16 +46,16 @@ The second kind of parsing is string parsing, explained in the legacy documentat

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*.
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_.

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

twemoji.parse(document.body);

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

// note the div is preserved
img.parentNode === div; // true
Expand All @@ -73,16 +74,16 @@ All other overloads described for `string` are available in exactly the same way
Here's the list of properties accepted by the optional object that can be passed to the `parse` function.

```js
{
callback: Function, // default the common replacer
attributes: Function, // default returns {}
base: string, // default jsDelivr
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: Function, // default the common replacer
attributes: Function, // default returns {}
base: string, // default jsDelivr
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
Expand Down Expand Up @@ -146,19 +147,19 @@ For a given HEX codepoint, returns UTF-16 surrogate pairs.

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

### twemoji.convert.toCodePoint()

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

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

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

## Tips
Expand All @@ -169,10 +170,10 @@ If you'd like to size the emoji according to the surrounding text, you can add t

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

Expand All @@ -188,19 +189,19 @@ To properly support emoji, the document character set must be set to UTF-8. This

### 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:
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:

```js
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);
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);
}
});
```

Expand All @@ -221,12 +222,12 @@ However, we consider the guide a bit onerous and as a project, will accept a men
## Community Projects

* [Twemoji Cheatsheet](https://twemoji-cheatsheet.vercel.app) by [@ShahriarKh](https://github.com/ShahriarKh): An easy-to-use cheatsheet for exploring, copying and downloading emojis!
* [Twemoji Amazing](https://github.com/SebastianAigner/twemoji-amazing) by [@SebastianAigner](https://github.com/SebastianAigner): Use Twemoji using CSS classes (like [Font Awesome](http://fortawesome.github.io/Font-Awesome/)).
* [Twemoji Amazing](https://github.com/SebastianAigner/twemoji-amazing) by [@SebastianAigner](https://github.com/SebastianAigner): Use Twemoji using CSS classes (like [Font Awesome](http://fortawesome.github.io/Font-Awesome)).
* [Twemoji Ruby](https://github.com/jollygoodcode/twemoji) by [@JollyGoodCode](https://twitter.com/jollygoodcode): Use Twemoji in Ruby.
* [Twemoji Utils](https://github.com/gustavwilliam/twemoji-utils) by [@gustavwilliam](https://github.com/gustavwilliam): Utilities for finding and downloading Twemoji source files.
* [Twemoji for Pencil](https://github.com/nathanielw/Twemoji-for-Pencil) by [@Nathanielnw](https://twitter.com/nathanielnw): Use Twemoji in Pencil.
* [FrwTwemoji - Twemoji in dotnet](http://github.frenchw.net/FrwTwemoji/) by [@FrenchW](https://twitter.com/frenchw): Use Twemoji in any dotnet project (C#, asp.net ...).
* [Emojiawesome - Twemoji for Yellow](https://github.com/datenstrom/yellow-extensions/tree/master/source/emojiawesome) by [@datenstrom](https://github.com/datenstrom/): Use Twemoji on your website.
* [FrwTwemoji - Twemoji in dotnet](http://github.frenchw.net/FrwTwemoji) by [@FrenchW](https://twitter.com/frenchw): Use Twemoji in any dotnet project (C#, asp.net ...).
* [Emojiawesome - Twemoji for Yellow](https://github.com/datenstrom/yellow-extensions/tree/main/source/emojiawesome) by [@datenstrom](https://github.com/datenstrom): Use Twemoji on your website.
* [EmojiPanel for Twitter](https://github.com/danbovey/EmojiPanel) by [@danielbovey](https://twitter.com/danielbovey/status/749580050274582528): Insert Twemoji into your tweets on twitter.com.
* [Twitter Color Emoji font](https://github.com/eosrei/twemoji-color-font) by [@bderickson](https://twitter.com/bderickson): Use Twemoji as your system default font on Linux & OS X.
* [Emojica](https://github.com/xoudini/emojica) by [@xoudini](https://twitter.com/xoudini): An iOS framework allowing you to replace all standard emoji in strings with Twemoji.
Expand Down Expand Up @@ -263,4 +264,4 @@ See the [LICENSE](LICENSE) and [LICENSE-GRAPHICS](LICENSE-GRAPHICS) files for fu

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/>
Graphics licensed under CC-BY 4.0: <https://creativecommons.org/licenses/by/4.0>
Binary file modified assets/72x72/1f47f.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/72x72/1f499.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion assets/svg/1f344-200d-1f7eb.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion assets/svg/1f34b-200d-1f7e9.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading