emoji-datasource-split sprite image sub divided into 12x12 grid

This project uses emoji-datasource images.

The purpose of this project is to make it easy to lazy load group of emojis instead of loading all at once. Each part has 25 emojis each.

You can check performance with this Emoji picker demo from react-emoji-search where you can try different sheet sizes.

Installation

This package includes 32 and 64 sprite sheets for apple, google, facebook and twitter. Including sheets: 128, 256 and clean

npm install emoji-datasource-split

If you want an specify set you can install one of these packages

npm install emoji-datasource-apple-split
npm install emoji-datasource-google-split
npm install emoji-datasource-twitter-split
npm install emoji-datasource-facebook-split

Each chunk has a size between 32.4kB and 210kB

Usage

Every grid has 5 rows and 5 columns of emojis, but index start from 0 to 4.

x: sheet_x * (100 / 4) // 4 = columns
y: sheet_y * (100 / 4) // 4 = rows
background-image: "emoji-1-1.webp"
background-size: 510% 510%;

The height and width of each chunk is 330x330 so the background-size is half of it

Example of grid 5x5

Grid image

The way is named is like this: emoji-1-1.webp. The first number is the row and the latter is the column.

Object

The new list adds img property and changes sheet_x and sheet_y so to be found in the grid in the img

{
    "name": "HASH KEY",
    "unified": "0023-FE0F-20E3",
    "non_qualified": "0023-20E3",
    "docomo": "E6E0",
    "au": "EB84",
    "softbank": "E210",
    "google": "FE82C",
    "image": "0023-fe0f-20e3.webp",
    "sheet_x": 0,
    "sheet_y": 0,
    "short_name": "hash",
    "short_names": [
      "hash"
    ],
    "text": null,
    "texts": null,
    "category": "Symbols",
    "subcategory": "keycap",
    "sort_order": 1463,
    "added_in": "0.6",
    "has_img_apple": true,
    "has_img_google": true,
    "has_img_twitter": true,
    "has_img_facebook": false,
    "img": "emoji-1-1.webp"
  },

Custom Object

The original list has a lot of properties that users may not use such as docomo, au, or non_qualified, which makes the file bigger. This object strips those properties, replace snake_case for camelCase, add keywords for each one, and the native emoji.

To make the file size smaller, you should:

Put the json object inside a .js file and use a formatter like prettier to remove the double quotes for each property.
Minify the file when you bundle your project.

In the end It'll go from 1.1mB to 654.2kB

  {
    "sheetX": 2,
    "sheetY": 4,
    "google": 1,
    "twitter": 1,
    "facebook": 1,
    "apple": 1,
    "native": "😂",
    "name": "face with tears of joy",
    "category": "Smileys & People",
    "sortOrder": 8,
    "keywords": [
      "face",
      "face with tears of joy",
      "joy",
      "laugh",
      "tear"
    ],
    "description": "face with tears of joy",
    "version": 0.6,
    "img": "emoji-11-7.webp"
  },