More easy to use custom icon now

Changelog

• Default slot added for use custom icon easily (2ff86c2)

<rate :length="5" :value="3" :ratedesc="desc" class="viaSlot">
  <svg class="icon" width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M12.034 7.074H19.416L13.445 11.448L15.726 18.524L9.75201 14.151L3.77901 18.524L6.06101 11.448L0.0880127 7.075H7.47001L9.75201 0.002V0L12.034 7.075V7.074Z"
      fill="currentColor"/>
  </svg>
</rate>

Add some flavour

.RateCustom.viaSlot .icon {
  width: 25px;
  height: 25px;
}
.Rate.viaSlot .Rate__star.filled{color: #813d1a;}
.Rate.viaSlot .Rate__star.hover{color: #E67136;}

Vue 3 support now added

With this release, you can use vue-rate with Vue 3 🎉
Related issue #30

Usage

npm install vue-rate@next
// or
yarn add vue-rate@next

import { createApp } from 'vue'
import rate from 'vue-rate'
import 'vue-rate/dist/vue-rate.css'

createApp(App)
  .use(rate)
  .mount('#app')

<template>
<rate :length="5" v-model="myRate" />
</template>

<script setup>
  import { ref } from 'vue';
  const myRate = ref(0);
<script>

Component style and itself separated

Changelog

With v2.4.0, component style and itself separated. You can see below how to registering component:

import rate from 'vue-rate'
import 'vue-rate/dist/vue-rate.css'

Vue.use(rate)

Thanks to @ansidev for his contribution.

🎊 vue-rate Now Customizable!

Changelog

You can customize style and icon with v2.30

Adding Custom Icon

• iconref {string}: ID of symbol icon

Insert symbol icon into your codebase

<symbol id="icon-heart" class="icon" viewBox="0 0 32 32">
  <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
</symbol>

Then add Rate component. iconref must be symbol's id

<rate :length="5" iconref="icon-heart" />

Customize Style

Also can change style. Add a specific class to your rate component

<rate class="RateCustom" :length="5" iconref="icon-heart" />

Change the style what you want

.RateCustom.Rate .icon {
  width: 25px;
  height: 25px;
}
.RateCustom.Rate .Rate__star.filled { color: blue; }
.RateCustom.Rate .Rate__star.hover { color: red; }

Read-only prop added

You can see little changelog below:

• Read-only prop added.
• Value prop now accepts Number and String.

Vue Rate can disable now

Vue rate can disable now. You can see little changelog below:

• Disable state added,
• Element of star was changed with <button>.
• Sass dependencies removed.