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

[ZRaunaque]

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

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

[serebrov]

@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]

it is not working on your demo as well.

[serebrov]

@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:

emoji-mart-vue/css/emoji-mart.css

Lines 40 to 45 in 1db68ae

	.emoji-type-native {
	font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI',
	'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'EmojiOne Color',
	'Android Emoji';
	word-break: keep-all;
	}