openmoji-sprites

Production-ready sprite sheets for OpenMoji.org emojis available at axelpale.github.io/openmoji-sprites

Data API

Programmatic access to the sheet files and their emoji content.

$ npm install openmoji-sprites

Usage:

> const sprites = require('openmoji-sprites')
> sprites.group['smileys-emotion'].sheets[0].hexcodes
[
  '1F600',
  '1F603',
  '1F604',
  '1F601',
  ...
]

Usage with Webpack, file-loader, and style-loader:

const urlToAnimals = require('openmoji-sprites/docs/png72/animals-nature-00.png')
require('openmoji-sprites/docs/png72/animals-nature-00.css')

Advanced usage with Webpack and require.context:

const sprites = require('openmoji-sprites')
// Preload all PNG sheets and bundle their CSS.
const resolve = require.context('openmoji-sprites/docs/png72/', true, /\.(png|css)$/i)
// Activate each CSS sheet.
sprites.includeGroups.forEach(groupName => {
  const group = sprites.groups[groupName]
  group.sheets.forEach(sheet => {
    // Style loader inserts CSS into DOM when resolved.
    resolve(sheet.files.png72.css)
  })
})

// Then for example insert a smiley:
button.innerHTML = '<span class="openmoji openmoji-1F600"></span>'

Full schema by example:

{
  includeGroups: [
    'smileys-emotion',
    'people-body',
    ...
  ],
  groups: {
    'smileys-emotion': {
      name: 'smileys-emotion',
      icon: {
        emoji: '😀',
        hexcode: '1F600'
      },
      sheets: [
        {
          name: 'smileys-emotion-00',
          postfix: '-00',
          includeSubgroups: [
            'face-smiling',
            'face-affection',
            ...
          ],
          hexcodes: [
            '1F600',
            '1F603',
            '1F604',
            ...
          ],
          files: {
            png72: {
              png: 'smileys-emotion-00.png',
              css: 'smileys-emotion-00.css'
            },
            svg: {
              svg: 'smileys-emotion-00.svg',
              css: 'smileys-emotion-00.css'
            }
          }
        },
        ...
      ]
    },
    'people-body': { ... }
    ...
  },
  version: '1.2.3'
}

Development

1. Download openmoji files for the generator.
2. Install deps $ npm install
3. Check syntax $ npm run lint
4. Generate sheets $ npm run generate
5. Commit new sheets $ cp -R dist/* docs