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

[ronhornbaker]

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:

[tommoor]

Hey Ron, looks great!

Do you see any downside to me enabling these options by default? On Thu, Mar 3, 2016 at 7:06 AM Ron Hornbaker notifications@github.com wrote:

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 https://github.com/tommoor, thank you! Here's a screenshot of my (not yet public) implementation which is going on a dark background:

[image: image] https://cloud.githubusercontent.com/assets/774647/13498271/dbda3618-e11e-11e5-8c4f-7866ad628c19.png

— Reply to this email directly or view it on GitHub https://github.com/tommoor/emojione-picker/issues/13.

[ronhornbaker]

Hi Tom,

I don't know of any downside to defaulting to sprites. Emojione should default to sprites imo. Having a client make several hundred unnecessary http requests is never a good thing.

You'll need to make several stylesheet changes to get them sized and lining up properly in your picker, however. I'll send you my css soon.

-Ron

On Mar 3, 2016, at 10:19 AM, Tom Moor notifications@github.com wrote:

Hey Ron, looks great!

Do you see any downside to me enabling these options by default? On Thu, Mar 3, 2016 at 7:06 AM Ron Hornbaker notifications@github.com wrote:

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 https://github.com/tommoor, thank you! Here's a screenshot of my (not yet public) implementation which is going on a dark background:

[image: image] https://cloud.githubusercontent.com/assets/774647/13498271/dbda3618-e11e-11e5-8c4f-7866ad628c19.png

— Reply to this email directly or view it on GitHub https://github.com/tommoor/emojione-picker/issues/13.

— Reply to this email directly or view it on GitHub.

[ronhornbaker]

Here's my css: https://gist.github.com/ronhornbaker/1d6695a318b7febb2f6e

Note: I'm not sure how it will look with search disabled, as I don't use that option. Will probably be just blank space in the header.

[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.

[yofret]

Hi guys, I'm kinda lost here, where should I add these two lines to avoid the hunders png loading? thanks for the help! this is an awesome component

[jonashaefele]

It should work if you add the lines right after your import statements for emojione.

I had to fork the repo:

https://github.com/DecodedCo/emojione-picker

Here's the lines I added (in this and another file)

https://github.com/DecodedCo/emojione-picker/blob/master/src/picker.jsx#L9-11

[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.