<template>
    <svg
      class="svg-icon"
      :class="className"
      aria-hidden="true"
      :style="{ width: size + 'px', height: size + 'px', fill: color }"
    >
      <use :href="iconName" />
    </svg>
  </template>
  
  <script setup>
  import { computed } from "vue";
  
  const props = defineProps({
    icon: {
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "",
    },
    size: {
      type: Number,
      default: 20,
    },
    color: {
      type: String,
      default: "green",
    },
  });
  
  const iconName = computed(() => `#icon-${props.icon}`);
  </script>
  
  <style lang="scss" scoped>
  // .svg-icon {
  //   fill: currentColor;
  // }
 
  </style>
  