🎊 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; }