For anyone wanting to avoid loading several hundred pngs, here's the trick

By default emojione loads a small png for each emoji, but there’s a spritesheet option that loads only one image then renders via background-position for each emoji.

It’s simple to turn it on. Just add these two lines of js before rendering the Picker:

emojione.imageType = 'png'; emojione.sprites = true; Hope this helps someone. Awesome little component here, @tommoor, thank you! Here’s a screenshot of my (not yet public) implementation which is going on a dark background:

[jonashaefele]

it would be great if the emojione settings could be passed in as props. I ended up forking the repo and setting the following options for emojione:

emojione.imageType = 'svg';
emojione.sprites = true;
emojione.imagePathSVGSprites = '';

then in the component where I render the emoji-picker I loaded the svg inline:

<div style={{display: 'none'}}>
     {require('emojione/assets/sprites/emojione.sprites.svg')}
</div>

using the an inline loader for SVG: dangerouslySetInnerHTML.loader.js

found here: 
module.exports = function(content) {
    return (
        'module.exports = require("react").createElement("span", {' +
            'dangerouslySetInnerHTML: {' +
                '__html: ' + JSON.stringify(content) +
            '}' +
        '});'
    );
};

found here: http://stackoverflow.com/questions/30844298/how-do-i-load-svgs-directly-in-my-react-component-using-webpack

this saves all HTTP requests as the sprite gets bundled with the rest of the app.

I was going to do a PR, but it went off too early. I can still make a PR, if people are interested.

[jonashaefele]

Make sure you have the SVG inline somewhere.

And be aware this is going to add 4.6MB to your bundle size. So you’ll probably want to split it out into it’s own webpack bundle.