<template>
  <svg class="svg-icon" aria-hidden="true" :style="{ color: color }">
    <use :xlink:href="svgName" />
  </svg>
</template>

<script>
  import { defineComponent, computed } from 'vue';

  // const importAll = (requireContext) => requireContext.keys().forEach(requireContext);
  // try {
  //     importAll(import.meta.glob('@/assets/icons/*.svg'))
  // } catch (error) {
  //     console.log(error)
  // }

  export default defineComponent({
    name: 'SvgIcon',
    props: {
      iconName: {
        type: String,
        required: true,
      },
      color: {
        type: String,
        required: false,
      },
    },
    setup(props) {
      const svgName = computed(() => `#icon-${props.iconName}`);
      return {
        svgName,
      };
    },
  });
</script>

<style lang="scss" scoped>
  .svg-icon {
    position: relative;
    width: 1em;
    height: 1em;
    overflow: hidden;
    vertical-align: -0.15em;
    fill: currentColor;

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      pointer-events: none;
      cursor: pointer;
      content: '';
    }
  }
</style>
