jm-david / emoji-mart-vue

One component to pick them all 👊🏼
https://jm-david.github.io/emoji-mart-vue
BSD 3-Clause "New" or "Revised" License
603 stars 82 forks source link

Unable to change 'not hovered emoji' to custom. #65

Open OneMoreRound82 opened 4 years ago

OneMoreRound82 commented 4 years ago

I am using a custom set of emoji's which is working well.

I am trying to set the 'emoji shown when no emojis are hovered' to one of these custom emoji's but it is returning nothing.

My custom set of emjoi's is working fine and is loaded under :custom in the follow sinppet.

<picker v-show="showEmojiPicker" title="Close" emoji="cross-mark" @select="addEmoji" @mousedown.13="getSelectionTest" @click="getSelectionTest" style="user-select:none;" :custom="customEmojis" :include = "includes" />

cross-mark refers to this reference in my data.json which I am trying to load:

{ "id" : "cross-mark", "name": "Cross Mark", "short_names": ["cross_mark"], "text": "", "emoticons": "2764", "keywords": ["cross","mark"], "imageUrl": "https://vapor-xxxxxx.s3.eu-west-2.amazonaws.com/upload/emoji/2764.png", "unified": "1f60d" }

Can you please confirm whether or not this functionality already exists, or if the 'not hovered' icon must refer to a non-custom property?

c0rnonthec0bb commented 4 years ago

I got this to work by passing a shortened emoji object in the emoji parameter instead of a string. For example:

:emoji="{ 'imageUrl': 'https://vapor-xxxxxx.s3.eu-west-2.amazonaws.com/upload/emoji/2764.png' }".

This works fine but does however produce a console error about the parameter type. This can be fixed by inserting the following line of code immediately after importing the picker:

Picker.props.emoji.type = [String, Object]