vue-star-rating.js

module.exports = {
  name: 'StarRating',
  functional: true,
  props: {
    stars: {
      type: Number,
      default: 0
    },
    tag: {
      type: String,
      default: 'span'
    },
    size: {
      type: Number,
      default: 16
    },
    spacing: {
      type: Number,
      default: 2
    }
  },
  render(h, { props }) {
    return h(
      props.tag,
      {
        style: {
          fontSize: `${props.size}px`,
          letterSpacing: `${props.spacing}px`,
          color: '#ed8a19'
        }
      },
      Array.from({ length: 5 }, (x, i) =>
        i >= props.stars ? '\u2606' : '\u2605'
      ).join('')
    )
  }
}