<script>
/**
 * BaseIcon component
 */
export default {
  name: 'BaseIcon',
  data () {
    return {
      isMouseOver: false
    }
  },
  props: {
    /**
     * fill
     */
    fill: {
      type: String,
      default: 'red'
    },
    /**
     * fill when 'hover'
     */
    hoverFill: {
      type: String,
      default () {
        return this.fill
      }
    },
    /**
     * width
     */
    width: {
      type: String,
      default: '26px'
    },
    /**
     * height
     */
    height: {
      type: String,
      default () {
        return this.width
      }
    }
  },
  computed: {
    /**
     * Return hoverFill when mouse is over
     */
    fillColor: function () {
      return this.isMouseOver
        ? this.hoverFill
        : this.fill
    }
  },
  methods: {
    mouseOver: function () {
      this.isMouseOver = true
    },
    mouseLeave: function () {
      this.isMouseOver = false
    }
  }
}
</script>
