search

serebrov / emoji-mart-vue

One component to pick them all (performance improvements) 👊🏼
https://serebrov.github.io/emoji-mart-vue/
BSD 3-Clause "New" or "Revised" License
273 stars 48 forks source link

Relaxed emoji is not colorful, its black & white lines. #262

Open ZRaunaque opened 1 year ago

ZRaunaque commented 1 year ago

Hi @serebrov, When I clicked on the relaxed emoji, it print as b&w lined svg. Although in picker it shows as colorful.

Screenshot 2023-03-22 at 11 37 44 AM Screenshot 2023-03-22 at 11 37 57 AM

Im using a mac. Pls let me know asap how can we resolve this.

serebrov commented 1 year ago

@ZRaunaque Do you think this is the problem with the picker? Once you clicked the emoji in the picker, it gets passed to the external code, so you need to check your implementation to see why it is like that.

It might also be useful to check this section of the docs if you try to use native emojis (they will not work everywhere).

You can refer to the demo app that also displays the selected emoji below the picker, source is here.

Zumra96 commented 3 months ago

it is not working on your demo as well. image

serebrov commented 3 months ago

@Zumra96 With native emoji it depends on what is supported by your font (which, in turn, depends on your browser and operating system).

You can find more details in the README, the section I linked above:

It might also be useful to check this section of the docs if you try to use native emojis (they will not work everywhere).

In particular, this part:

In practice, the support for native unicode emoji is still not perfect: unicode emoji characters are part of the font and the font needs to be colorful. But there is no yet a single standard for color fonts implemented by browsers, so the browser leaves emoji rendering to the operating system.

This way, how the emoji will look depends on the operating system and native unicode emoji will look different on different platforms. Also older operating system versions don't not support all the emojis that are currently in the unicode standard, so it may be necessary to limit emojis to some smaller subset.

This is as far as I know and I did not research the recent state of things. Maybe now there is some magical font that is supported across all browsers and platforms and the fix here could be a CSS change.

The current code that defines the native emoji font is here:

https://github.com/serebrov/emoji-mart-vue/blob/1db68aeff40f8df4db791715d3be1361bf3960b7/css/emoji-mart.css#L40-L45