search

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

Custom emojis that have non square size #18

Open RedKage opened 6 years ago

RedKage commented 6 years ago

Here is the issue: http://prntscr.com/jnlsip

Custom emoji:

[
{"name":"thumbsupparrot","short_names":["thumbsupparrot"],"text":"","emoticons":[],"keywords":["thumbsupparrot"],"imageUrl":"http://cultofthepartyparrot.com/parrots/thumbsupparrot.gif"}
]

Which renders this CSS:

element.style {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(http://cultofthepartyparrot.com/parrots/thumbsupparrot.gif);
    background-size: 100%;
}

I'm fixing this using this local stylus in my component which holds the picker

    :global(.emoji-mart-emoji)
      span
        background-position center
        background-repeat no-repeat