emoji-vote

Emoji vote component.

• Idea from 支付宝商户评论页的满意度 Emoji 会跟随用户的当前选择看向该 Icon.
• Emoji from EmojiOne™ 2.

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

$ npm install --save emoji-vote

Then with a module bundler like rollup or webpack, use as you would anything else:

// using ES6 modules
import emojiVote from 'emoji-vote'

// using CommonJS modules
var emojiVote = require('emoji-vote')

The UMD build is also available on unpkg:

<script src="//unpkg.com/emoji-vote/dist/emoji-vote.cjs.js"></script>

This exposes the emojiVote() function as a global.

Usage

<div class="emoji">
  <input type="radio" name="emojiVote" id="emojiVote_dissatisfied" value="dissatisfied">
  <label for="emojiVote_dissatisfied">不满</label>
  <input type="radio" name="emojiVote" id="emojiVote_general" value="general">
  <label for="emojiVote_general">一般</label>
  <input type="radio" name="emojiVote" id="emojiVote_satisfied" value="satisfied">
  <label for="emojiVote_satisfied">满意</label>
  <input type="radio" name="emojiVote" id="emojiVote_awesome" value="awesome">
  <label for="emojiVote_awesome">满意</label>
</div>

import emojiVote from 'emoji-vote'

emojiVote('.emoji', {
  size: 30
})

Examples & Demos

Real Example on JSFiddle ➡️

API

emoji-vote's API is organized as follows:

emojiVote(el: String|Element, options: Object)

emojiVote will account for the following properties in options:

• emoji The emoji data array, default:

  [
    `
      <circle cx="20.5" cy="26.6" r="5"/>
      <circle cx="43.5" cy="26.6" r="5"/>
      <path d="M23 47.6c5.8-4.8 12.2-4.8 18 0 .7.6 1.3-.4.8-1.3-1.8-3.4-5.3-6.5-9.8-6.5s-8.1 3.1-9.8 6.5c-.5.9.1 1.9.8 1.3"/>
    `,
    `
      <circle cx="32" cy="45.1" r="7"/>
      <circle cx="20.2" cy="25" r="4.5"/>
      <circle cx="42.7" cy="25" r="4.5"/>
    `,
    ...
  ]

• render The render function for create svg, default:

    function (data, size) {
      return `
        <svg class="emoji-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="font-size: ${size}px;">
          <circle class="emoji-facial" cx="32" cy="32" r="30" fill="#fff" stroke="#999" stroke-width="3" />
          <g class="emoji-facial-features" fill="#999">
            ${data}
          </g>
        </svg>
      `
    }

• size The emoji size, default to 20px.

TODO

• [x] custom emoji svg template.
• [ ] custom emoji color config