npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

emoji-datasource-apple-split

v1.0.6

Published

Emoji data and images split

Downloads

44

Readme

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"
  },