Request: Return URL of emoji (Twemoji)

[t1mmen]

Is there a way to get the URL to the image asset from emoji-mart?

Since onClick doesn't return it, but perhaps there's a util function I'm not seeing?

I'll take a stab at a PR if someone can point me in the right direction.

[EtienneLem]

There isn’t a direct way to get it, since it’s always dynamic and depends on a few props (emoji.js#L126), but tenically one could:

Emoji.defaultProps.backgroundImageFn(
  Emoji.defaultProps.set, // apple
  Emoji.defaultProps.sheetSize // 64
)

That function returns the sheet URL used. EmojiMart uses spritesheets provided by https://github.com/iamcal/emoji-data, so all emojis have the same URL. Is that what you wanted, or were you looking for a distinct URL per emoji to use in a <img> element?

[t1mmen]

Hi @EtienneLem,

Thanks for the super fast response!

I'm specifically looking for the unique URL's/filenames for the Twemoji set, as the backend I'm integrating with requires the direct URL to the emoji.

Looking at emoji-data's example in https://github.com/iamcal/emoji-data/blob/master/README.md, the image value is what I'm looking for (since that appears to reference https://github.com/twitter/twemoji/blob/gh-pages/36x36/261d.png)

I suppose I could find the right image via emoji-data, but it would be helpful to avoid another direct dependency.

Thanks again for your time, and hard work!

[EtienneLem]

I see. What EmojiMart could do is at least return the unified value in the click callback, so you could then easily construct a URL that you could store on your backend.

I would suggest using https://rawgit.com (unless you’re hosting all emoji images yourself?). For example: https://cdn.rawgit.com/iamcal/emoji-data/v2.4.4/img-twitter-64/261d.png or https://cdn.rawgit.com/twitter/twemoji/gh-pages/36x36/261d.png

261d would be the new value added in the onClick callback and it would be up to you to “figure out” an absolute URL that points to that emoji (cdn, self-hosted, etc.)

Would that work for you?

[t1mmen]

261d would be the new value added in the onClick callback and it would be up to you to “figure out” an absolute URL that points to that emoji (cdn, self-hosted, etc.)

Yes, that would be perfect! 😍

[EtienneLem]

There you go! Available in v0.4.4.

As a FYI:
Some emojis (i.e. the :point-up:), will have -fe0f at the end of the unified value, but the images in both emoji-data and Twemoji don’t. That’s because these emojis sort of exist under 2 different forms:

EmojiMart will return 261d-fe0f because that’s the codePoint needed to reconstruct the native emoji. However in your case, I think it’d be safe to always unified.replace(/-fe0f$/, '') before storing in your backend.

[t1mmen]

Thank you very much, @EtienneLem :)