Emoji vote component.
- Idea from 支付宝商户评论页的满意度 Emoji 会跟随用户的当前选择看向该 Icon.
- Emoji from EmojiOne™ 2.
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.
<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
})
emoji-vote's API is organized as follows:
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 to20px
.
- custom emoji svg template.
- custom emoji color config