Merge pull request #15 from TaskFlow-CLAP/CLAP-106

Clap-106  공통 아이콘 컴포넌트 생성

Author: Minkyu0424

src/App.vue

@@ -5,13 +5,13 @@ import { RouterLink, RouterView } from 'vue-router'
 <template>
   <header>
     <div class="wrapper">
-      <nav>
+      <nav class="flex gap-3">
         <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/Icon">Icon</RouterLink>
         <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
-
   <RouterView />
 </template>
 

src/components/CommonIcons.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    :width="name?.width"
+    :height="name?.height"
+    :viewBox="`0 0 ${name?.width} ${name?.height}`"
+    :fill="isHovered ? name?.hoverFill || name?.fill : name?.fill"
+    @mouseover="isHovered = true"
+    @mouseleave="isHovered = false"
+    :class="className"
+    @click="onClick">
+    <path
+      v-for="(p, index) in Array.isArray(name?.path) ? name.path : [name?.path]"
+      :key="index"
+      :d="p"
+      v-bind="name?.options" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import type { IconProps } from '@/types/icon'
+import { defineProps, ref } from 'vue'
+const isHovered = ref(false)
+const { name, className, onClick } = defineProps<IconProps>()
+</script>