vuejs-emojis

adds emoji support for vuejs projects

Installation

To install vuejs-emojis, you need node.js and npm.

In your project directory, just run

npm install --save vuejs-emojis

Usage

import the package and add it to the components and add it in template:

<template>
    <emoji name="smile" size="20"/> 
</template>
<script>
import Emoji from 'vuejs-emojis'
export default {
components: { Emoji },
};
</script>

Preview

😄

Examples with different Sizes

Black Lives Matter (I acknowledge that Black people have to fight for basic rights, against systemic racism, unequal opportunities and injustice across the 🌎. I know this is wrong and I am 💔!)

    <div>
     <emoji name="black_heart" size="50"/> 
     <emoji name="black_medium_square" size="50"/> 
     <emoji name="waving_black_flag" size="50"/> 
     <emoji name="fist_1" size="50"/> 
     <emoji name="fist_2" size="50"/> 
    </div>

Carona Care (Stay Safe and Healthy 🙂)

  <div>
    <emoji name="virus" size="50" />
    <emoji name="mask" size="50" />
    <emoji name="sneezing_face" size="50" />
    <emoji name="gloves" size="50" />
    <emoji name="soap" size="50" />
  </div>

Reactions

   <div>
    <emoji name="thinking_face" size="20" />
    <emoji name="face-with-tears-of-joy" size="30" />
    <emoji name="wink" size="40" />
    <emoji name="sunglasses" size="50" />
    <emoji name="smiley" size="60" />
  </div>

Food

<div>
    <emoji name="taco" size="20" />
    <emoji name="fries" size="30" />
    <emoji name="burger" size="40" />
    <emoji name="burrito" size="50" />
    <emoji name="pizza" size="60" />
  </div>

Bright Sky

 <div>
    <emoji name="sun_with_face" size="20" />
    <emoji name="full_moon_with_face" size="30" />
    <emoji name="first_quarter_moon_with_face" size="40" />
    <emoji name="star" size="50" />
    <emoji name="star2" size="60" />
  </div>

Hand gestures

  <div>
    <emoji name="thumbsdown" size="20" />
    <emoji name="wave" size="30" />
    <emoji name="crossed_fingers" size="40" />
    <emoji name="thumbsup" size="50" />
    <emoji name="ok_hand" size="60" />
  </div>

Full list of emojis with name.

Emoji list come from js-emoji (🙏). You can get a JSON file with all emoji here: https://raw.githubusercontent.com/saqy/vuejs-emojis/master/src/emoji.json

License

MIT