emoji-component

Simple web component for rendering (svg, png, jpg) emojis

-

Installation

npm install --save emoji-component

Configuration

emojis

This component requires you to structure your emojis in a array , for example

Sample emoji list

[
  {
    "id":"555",
    "tag": "::happy::",
    "keywords": [
      "Happy",
      "Ecstatic",
      "Joyful",
      "Great",
      "Elated"
    ],
    "source": "1.svg",
    "category": "Good Mood"
  },
  {
    "id":"315",
    "tag": "::sad::",
    "keywords": [
      "Sad",
      "Sorrowful",
      "Disappointed"
    ],
    "source": "2.svg",
    "category": "Bad Mood"
  }
  ]

recently_used

Same as emojis

onEmojiClicked

This callback method returns the selected emoji object

background

Sets the background of the component

Usage

<template>
<div>
  <Emoji :emojis='emoji_list' :recently_used='recently_used' 
  @onEmojiClicked="getSelected" background=grey />
</div>
</template>

<script>
import Emoji from 'emoji-component'
export default {
      name: 'app',
      components: {
          Emoji
      },
      data: function () {
          return {
              emoji_list:[{
                              "id":"555",
                              "tag": "::happy::",
                              "keywords": ["Happy","Elated"],
                              "source": "1.svg",
                              "category": "Good Mood"},
                              {
                              "id":"555",
                              "tag": "::happy::",
                              "keywords": ["Happy","Elated"],
                              "source": "1.svg",
                              "category": "Good Mood"},
                          ],
              recently_used: []
          };
      },
      methods: {
          getSelected: function (emoji) {
          //callback on emoji clicked 
              console.log(emoji)
          }
      }
  }
</script>