svg を切り分け

src/shared/components/ChipButton.vue

@@ -1,45 +1,26 @@
 <script setup lang="ts">
 import { defineProps, defineEmits, computed } from 'vue';
 import Button from 'primevue/button';
+import IconClose from './IconClose.vue';
+import IconPlus from './IconPlus.vue';
 
 const props = defineProps<{
   label: string;
-  chipType: number;
+  type: 'default' | 'new';
 }>();
 defineEmits(['action']);
 
 const chipStyle = computed(() => ({
-  'button-chip': props.chipType === 0,
-  'button-newchip': props.chipType === 1,
+  'button-chip': props.type === 'default',
+  'button-newchip': props.type === 'new',
 }));
 </script>
 
 <template>
   <Button class="button" :class="chipStyle" @click="$emit('action')">
     <span>{{ label }}</span>
-    <svg
-      v-if="chipType === 0"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
-        fill="#5CB860"
-      />
-    </svg>
-    <svg
-      v-if="chipType === 1"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="#626264" />
-    </svg>
+    <IconClose v-if="type === 'default'" />
+    <IconPlus v-else-if="type === 'new'" />
   </Button>
 </template>
 <style lang="scss" scoped>

src/shared/components/IconClose.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
+      fill="#5CB860"
+    />
+  </svg>
+</template>

src/shared/components/IconPlus.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="#626264" />
+  </svg>
+</template>