<script setup lang="ts">
import { computed } from 'vue';
import * as icons from "lucide-vue-next";

const props = defineProps({
  name: {
    type: String,
    default: 'LayoutGrid'
  },
  size: Number,
  color: String,
  strokeWidth: Number,
  defaultClass: String,
  fill:{
    type: String,
    default: 'none'
  }
})
type IconsType = typeof icons;
const icon = computed(() => {
  const iconName = props.name as keyof IconsType;
  return icons[iconName] || icons['LayoutGrid'];
});
</script>

<template>
  <component
      :is="icon"
      :size="size"
      :color="color"
      :stroke-width="strokeWidth" :default-class="defaultClass"
      :fill="fill"
  />
</template>