emoji-picker-react icon indicating copy to clipboard operation
emoji-picker-react copied to clipboard

Why are emoji loaded from CDN?

Open Vanals opened this issue 3 months ago • 6 comments

I can see the emoji in the picker are loaded from a CDN , E.g: https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f619.png

Why? Why are we not simply using the emoji from the machine? What guarantees the emoji are always loaded from the CDN? isn't expensive for who hosts the CDN?

I can see in this live DEMO https://ealush.com/emoji-picker-react/, they are not from a CDN url. Which would result quicker and less keen to break

Vanals avatar Sep 09 '25 07:09 Vanals

They load emojis from a CDN to guarantee visual consistency across platforms. If you rely on the system’s native emojis, they’ll look different on Windows, Android, iOS, etc., and some platforms may not even support the latest ones.

By serving images (like Apple-style or Twemoji) from a CDN, the picker ensures everyone sees the same design, just like Twitter or Facebook do. The demo you saw uses native Unicode emojis, which is faster but less consistent.

OtavioMendesSantos avatar Sep 26 '25 05:09 OtavioMendesSantos

@OtavioMendesSantos Why can't the emojis be part of the NPM package it self?

So I can then

  • chose which group I want,
  • have consistency
  • and more than anything have no delay and slow loading of emoji?

Vanals avatar Oct 05 '25 21:10 Vanals

You really don’t want to be loading images out of node_modules.

But if you really want to, you can store the emoji images as part of your app and pass the url pattern to the emoji picker.

On Sun, 5 Oct 2025 at 17:34 Marco Vanali @.***> wrote:

Vanals left a comment (ealush/emoji-picker-react#466) https://github.com/ealush/emoji-picker-react/issues/466#issuecomment-3369345988

@OtavioMendesSantos https://github.com/OtavioMendesSantos Why can't the emojis be part of the NPM package it self? so I cant chose which one I want, have consistency and more than anything have no delay and slow loading of emoji?

— Reply to this email directly, view it on GitHub https://github.com/ealush/emoji-picker-react/issues/466#issuecomment-3369345988, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACV32P27KB3TJNOMLAA7QID3WGFF3AVCNFSM6AAAAACF74COEGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTGNRZGM2DKOJYHA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

ealush avatar Oct 05 '25 22:10 ealush

@ealush the application gets build so they would not be coming, ultimately, from node_modules but from the builded application. So they would become static files, if am not wrong? And in that case why would that be a problem? Again just trying to understand cos to me feels more performing not having to load from CDN

Vanals avatar Oct 09 '25 21:10 Vanals

Agree, it's a big no-go for modern apps, especially with strict CSP's. Please add an option to disable this + allowing to set a nonce for EmojiPicker (for safe inline styles).

Zerebokep avatar Oct 14 '25 09:10 Zerebokep

For our app, we have strict privacy rules that disallow using CDNs for most intents and purposes. So loading emoji data (or an emoji picker) from a CDN is not an option unfortunately. Since we don't have the requirement to render the same OS style for every device, we can simply use the native render style and don't have to load the images from a CDN.

BingeCode avatar Nov 24 '25 09:11 BingeCode