emoji-mart-vue from npm.
Everything is working fine except the emojis which get rendered in teaxtarea are shown as black and white while I need to display them in the original way they are shown in the emoji picker.
Any help in this regards is highly appreciated.
What I have tried:
TextareaEmojiPicker.vue
< template > < div class =" textarea-emoji-picker" > < textarea ref =" textarea" class =" textarea" :value =" value" @input =" $emit('input', $event.target.value)" > < /textarea > < picker v-show =" showEmojiPicker" title =" Pick your emoji..." emoji =" point_up" @select =" addEmoji" class =" emoji-trigger" :class =" { 'triggered': showEmojiPicker }" @mousedown.prevent =" toggleEmojiPicker" style =" width:20px;height:20px" viewBox =" 0 0 24 24" < path fill =" #888888" d =" M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" / > < /span > < /template > < script > import { Picker } from ' emoji-mart-vue' ; export default { components: { Picker }, name: " TextareaEmojiPicker" , props: { value : { type: String , default : ' ' data () { return { showEmojiPicker: false methods: { toggleEmojiPicker () { this .showEmojiPicker = !this.showEmojiPicker addEmoji (emoji) { const textarea = this .$refs.textarea; const cursorPosition = textarea.selectionEnd; const start = this . value .substring( 0 , textarea.selectionStart); const end = this . value .substring(textarea.selectionStart); const text = start + emoji.native + end; this .$emit( ' input' , text); textarea.focus(); this .$nextTick(() => { textarea.selectionEnd = cursorPosition + emoji.native.length; < / script > < style scoped > box-sizing : border-box ; . textarea-emoji-picker { position : relative ; width : 400px ; margin : 0 auto ; . textarea { width : 100% ; min-height : 300px ; outline : none ; box-shadow : none ; padding : 10px 28px 10px 10px ; font-size : 15px ; border : 1px solid #BABABA ; color : #333 ; border-radius : 2px ; box-shadow : 0px 2px 4px 0 rgba(0,0,0,0.1) inset ; resize : vertical ; . emoji-mart { position : absolute ; top : 33px ; right : 10px ; . emoji-trigger { position : absolute ; top : 10px ; right : 10px ; cursor : pointer ; height : 20px ; . emoji-trigger path { transition : 0.1s all ; . emoji-trigger:hover path { fill : #000000 ; . emoji-trigger . triggered path { fill : darken(#FEC84A, 15%) ; </ style >
and emoji-vue.vue imports TextareaEmojiPicker.vue here:
< template > < div class =" emoji-page" > < textarea-emoji-picker v-model =" text" / > < /template > < script > import TextareaEmojiPicker from ' ./TextareaEmojiPicker' export default { name: " emoji-vue" , components: { TextareaEmojiPicker }, data () { return { text: ' ' < / script > < style scoped > . emoji-page { padding-top : 50px ; </ style > You should talk to the people who created it - they should provide technical support and will know more about their product than we will. If they don't, then find another package, as you will doubtless have further problems down the line!
A quick google would have found you the author: emoji-mart-vue - Google Search [ ^ ]

So there are two reasons:
1) The author is busy, or didn't get the message.
2) The author doesn't care to respond, or fix it.

Either way, it's a good sign to abandon that package, and use something that is supported within a "reasonable" timeframe.
Or read the source code, understand it, and fix the problem yourself. That's what we would have to do and we don't have any known need for whatever the heck it is that the package does...

Read the question carefully.

Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.

If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question. Let's work to help developers, not make them feel stupid.