<template>
  <div
    class="icon"
    :class="[className, { disabled }]"
    :style="style"
  >
  <svg class="svg-icon" aria-hidden="true" v-on="$attrs">
    <use v-bind:xlink:href="iconName" />
  </svg>
  </div>
</template>

<script setup>
  import { computed } from 'vue'

  const props = defineProps(['className', 'color', 'glyph', 'fillColor', 'strokeColor', 'disabled'])
  const style = {
    filter: props.color
  }

  if (!props.disabled) {
    style.color = props.color
  }
  const iconName = computed(() => `#${props.glyph}`)
</script>

<style>
.icon {
  width: 24px;
  height: 24px;
}
.svg-icon {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 575px) {
  .icon {
    width: 18px;
    height: 18px;
  }
}
</style>
