Vue Rate Component

<template>
  <div>
    <rate :length="5" class="viaSlot">
      <svg 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>
  </div>
</template>

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

<template>
  <div>
    <svg style="position: absolute; width: 0; height: 0;"  height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <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" />
        </symbol>
      </defs>
    </svg>

    <rate class="RateCustom" :length="5" :value="3" :ratedesc="desc" iconref="icon-heart">
  </div>
</template>

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