<template>
  <svg
      className="svg-icon"

      :style="{ width: width, height: height, }"
  >
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      default: "16px",
    },
    height: {
      type: String,
      default: "16px",
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
  },
};
</script>

<style>

.svg-icon {
  width: 30px;
  height: 30px;
  fill: #249ffd;
}

.svg-icon:hover {
  width: 30px;
  height: 30px;
  fill: #ffffff;
}


</style>
