<template>
  <div class="icon-wrapper">
    <svg class="icon" :width="width" :height="height" :fill="fill" >
      <use v-bind="{'xlink:href':'/icons.svg#' + name}"/>
    </svg>

    <!-- //FIXME: Just to auto put "#" if input is a hex value -->
    <!-- {{isNaN(this.fill) ? (this.fill.length === 6 ? '#'+this.fill : this.fill) : '#'+this.fill}} -->
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    width: {
      type: [Number, String],
      default: 24
    },
    height: {
      type: [Number, String],
      default: 24
    },
    fill: {
      type: [Number, String],
      default: '#000000'
    }
  },
}
</script>

