Production-ready sprite sheets for OpenMoji.org emojis available at axelpale.github.io/openmoji-sprites
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'
}
- Download openmoji files for the generator.
- Install deps
$ npm install
- Check syntax
$ npm run lint
- Generate sheets
$ npm run generate
- Commit new sheets
$ cp -R dist/* docs