<template>
  <svg class="app-icon" :class="[`app-icon-${tone}`]" viewBox="0 0 24 24" aria-hidden="true">
    <path
      v-for="path in paths"
      :key="path"
      :d="path"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      :stroke-width="strokeWidth"
    />
  </svg>
</template>

<script setup>
import { computed } from "vue";
import { ICON_PATHS } from "../utils/iconMap";

const props = defineProps({
  name: { type: String, required: true },
  tone: { type: String, default: "default" },
  strokeWidth: { type: [Number, String], default: 1.8 }
});

const paths = computed(() => ICON_PATHS[props.name] || ICON_PATHS.dashboard);
</script>
