For anyone wanting to avoid loading several hundred pngs, here's the trick about emojione-picker HOT 7 CLOSED

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.

from emojione-picker.

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 [email protected]
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
#13.

from emojione-picker.

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 [email protected] 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 [email protected]
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
#13.

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

from emojione-picker.

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.

from emojione-picker.

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

from emojione-picker.

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

from emojione-picker.

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.

from emojione-picker.