@energysage/es-ds-components 5.1.0 → 5.3.0

package/app/components/icon/minus.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconMinus',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhMinus } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3 12a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Z" />
-    </svg>
+    <ph-minus :size="width" />
 </template>

package/app/components/icon/money-bag.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconMoneyBag',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhMoney } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
 
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M21.307 15.285c-.09-3.659-2.002-6.403-5.29-7.614l1.598-3.7a1.443 1.443 0 0 0-.313-1.606 1.436 1.436 0 0 0-1.607-.28l-2.801 1.293a2.078 2.078 0 0 1-1.821-.025L9.219 2.44a1.732 1.732 0 0 0-1.936.272 1.715 1.715 0 0 0-.462 1.895l1.137 3.049c-3.263 1.195-5.166 3.947-5.265 7.63v5.109a3.566 3.566 0 0 0 3.56 3.56h11.494c1.961 0 3.362-1.369 3.56-3.494v-5.175ZM8.222 3.749c.05-.05.19-.148.379-.05l1.854.915c.956.478 2.06.486 3.032.041l2.851-1.244L14.6 7.424H9.367L8.14 4.12c-.074-.198.042-.322.091-.371h-.008Zm9.525 18.804H6.261a2.168 2.168 0 0 1-2.167-2.16v-5.075c.05-1.903.741-5.265 4.787-6.493h6.172c4.111 1.244 4.804 4.598 4.853 6.55v4.986c-.14 1.376-.947 2.192-2.159 2.192Zm-3.568-5.076a2.19 2.19 0 0 1-1.705 2.126v.51a.531.531 0 0 1-.528.528.531.531 0 0 1-.527-.527v-.544a2.168 2.168 0 0 1-1.599-2.093c0-.289.24-.528.528-.528.288 0 .527.24.527.528a1.13 1.13 0 0 0 1.129 1.129c.626 0 1.129-.503 1.129-1.13 0-.625-.503-1.128-1.129-1.128-1.112-.017-1.994-.906-1.994-1.994 0-.898.593-1.648 1.409-1.895v-.552c0-.289.239-.528.527-.528.289 0 .528.24.528.528v.519a1.996 1.996 0 0 1 1.516 1.928.531.531 0 0 1-.527.527.531.531 0 0 1-.528-.527.939.939 0 1 0-1.879 0c0 .519.412.93.923.94 1.22 0 2.192.98 2.192 2.183h.008Z" />
-    </svg>
+    <ph-money :size="width" />
 </template>

package/app/components/icon/open-envelope.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconOpenEnvelope',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhEnvelopeOpen } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M9.133 2.787a5 5 0 0 1 5.735 0l6 4.2A5 5 0 0 1 23 11.083V19a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3v-7.917a5 5 0 0 1 2.132-4.096l6-4.2Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3.883a3 3 0 0 0-1.72.542l-6 4.2A3 3 0 0 0 3 11.083V19a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-7.917a3 3 0 0 0-1.28-2.458l-6-4.2A3 3 0 0 0 12 3.883ZM9.133 2.787a5 5 0 0 1 5.735 0l6 4.2A5 5 0 0 1 23 11.083V19a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3v-7.917a5 5 0 0 1 2.132-4.096l6-4.2Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m8.876 15.782-7.5-6.001 1.249-1.562 7.5 6.001a3 3 0 0 0 3.75 0l7.5-6 1.25 1.56-7.501 6.002a5 5 0 0 1-6.248 0Z" />
-    </svg>
+    <ph-envelope-open :size="width" />
 </template>

package/app/components/icon/paper.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPaper',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhFile } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M3.879 1.879A3 3 0 0 1 6 1h7.56a3 3 0 0 1 2.097.855l4.44 4.342A3.003 3.003 0 0 1 21 8.342V20a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V4a3 3 0 0 1 .879-2.121Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3.879 1.879A3 3 0 0 1 6 1h7.56a3 3 0 0 1 2.097.855l4.44 4.342A3.003 3.003 0 0 1 21 8.342V20a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V4a3 3 0 0 1 .879-2.121ZM6 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8.342a1.001 1.001 0 0 0-.301-.715l-4.44-4.342A1 1 0 0 0 13.56 3H6Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M13 6V2h2v4a1 1 0 0 0 1 1h4v2h-4a3 3 0 0 1-3-3Z" />
-    </svg>
+    <ph-file :size="width" />
 </template>

package/app/components/icon/pencil.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPencil',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhPencilSimple } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M3.626 15.34 15.863 3.104l.016-.015a3.56 3.56 0 0 1 5.034 5.032l-.016.016L8.658 20.374a3 3 0 0 1-1.533.82l-3.929.787a1 1 0 0 1-1.177-1.177l.786-3.93a3 3 0 0 1 .82-1.533Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M17.268 4.526 5.04 16.756a1 1 0 0 0-.273.51l-.492 2.46 2.458-.493a1 1 0 0 0 .51-.273L19.475 6.73a1.56 1.56 0 0 0-2.206-2.204ZM3.626 15.34 15.863 3.103l.016-.015a3.56 3.56 0 0 1 5.034 5.032l-.016.016L8.658 20.374a3 3 0 0 1-1.533.82l-3.929.787a1 1 0 0 1-1.177-1.177l.786-3.93a3 3 0 0 1 .82-1.533Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m16.793 10.207-3-3 1.414-1.414 3 3-1.414 1.414Z" />
-    </svg>
+    <ph-pencil-simple :size="width" />
 </template>

package/app/components/icon/person-add.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPersonAdd',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhUserPlus } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M17 7c0 2.75-2.25 5-5 5S7 9.75 7 7s2.25-5 5-5 5 2.25 5 5Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM6 7a6 6 0 1 1 12 0A6 6 0 0 1 6 7Zm13 5a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1ZM6.649 15a2 2 0 0 0-1.986 1.752l-.39 3.124A1 1 0 0 0 5.266 21H17a1 1 0 1 1 0 2H5.266a3 3 0 0 1-2.977-3.372l.39-3.124A4 4 0 0 1 6.649 13a1 1 0 1 1 0 2Z" />
-    </svg>
+    <ph-user-plus :size="width" />
 </template>

package/app/components/icon/person-check.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPersonCheck',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhUserCheck } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M17 7c0 2.75-2.25 5-5 5S7 9.75 7 7s2.25-5 5-5 5 2.25 5 5Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM6 7a6 6 0 1 1 12 0A6 6 0 0 1 6 7Zm16.684 6.27a1 1 0 0 1 .046 1.414l-3.75 4a1 1 0 0 1-1.394.063l-2.25-2a1 1 0 0 1 1.328-1.494l1.522 1.353 3.084-3.29a1 1 0 0 1 1.414-.046ZM6.649 15a2 2 0 0 0-1.986 1.752l-.39 3.124A1 1 0 0 0 5.266 21H17a1 1 0 1 1 0 2H5.266a3 3 0 0 1-2.977-3.372l.39-3.124A4 4 0 0 1 6.649 13a1 1 0 1 1 0 2Z" />
-    </svg>
+    <ph-user-check :size="width" />
 </template>

package/app/components/icon/person-cross.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPersonCross',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhUserMinus } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M17 7c0 2.75-2.25 5-5 5S7 9.75 7 7s2.25-5 5-5 5 2.25 5 5Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM6 7a6 6 0 1 1 12 0A6 6 0 0 1 6 7Zm.649 8a2 2 0 0 0-1.986 1.752l-.39 3.124A1 1 0 0 0 5.266 21H17a1 1 0 1 1 0 2H5.266a3 3 0 0 1-2.977-3.372l.39-3.124A4 4 0 0 1 6.649 13H7a1 1 0 1 1 0 2h-.351Zm9.644-1.707a1 1 0 0 1 1.414 0l1.793 1.793 1.793-1.793a1 1 0 0 1 1.414 1.414L20.914 16.5l1.793 1.793a1 1 0 0 1-1.414 1.414L19.5 17.914l-1.793 1.793a1 1 0 0 1-1.414-1.414l1.793-1.793-1.793-1.793a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-user-minus :size="width" />
 </template>

package/app/components/icon/person.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPerson',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhUser } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M17.982 7.027c0 3.315-2.712 6.028-6.027 6.028s-6.027-2.713-6.027-6.028C5.928 3.712 8.64 1 11.955 1s6.027 2.712 6.027 6.027Z"
-            fill="none" />
-        <path
-            d="M11.955 13.055c3.315 0 6.027-2.713 6.027-6.028C17.982 3.712 15.27 1 11.955 1S5.928 3.712 5.928 7.027s2.712 6.028 6.027 6.028Zm0-10.046a4.03 4.03 0 0 1 4.018 4.018 4.03 4.03 0 0 1-4.018 4.019 4.03 4.03 0 0 1-4.018-4.019 4.03 4.03 0 0 1 4.018-4.018Z" />
-        <path
-            d="m21.698 19.685-.401-3.114a3.843 3.843 0 0 0-1.306-2.512c-.703-.602-1.708-1.004-2.612-1.004h-.402c-.602 0-1.004.402-1.004 1.004 0 .603.402 1.005 1.004 1.005h.402c.502 0 1.005.2 1.306.502.402.302.603.804.703 1.206l.402 3.114v.402c0 .1-.1.301-.201.401-.1.101-.2.201-.301.201-.1.1-.302.1-.402.1H5.225c-.1 0-.302 0-.402-.1-.1-.1-.201-.1-.302-.2-.1-.101-.2-.201-.2-.402 0-.1-.1-.302 0-.402l.401-3.114a2.4 2.4 0 0 1 .704-1.306c.401-.302.803-.502 1.305-.502h.402c.603 0 1.005-.402 1.005-1.005 0-.603-.402-1.005-1.005-1.005h-.502c-1.005 0-1.909.402-2.612 1.005a3.842 3.842 0 0 0-1.306 2.511l-.401 3.114c-.1.402 0 .905.1 1.306.1.402.301.804.603 1.105.301.302.602.603 1.004.704.402.2.804.301 1.206.301h13.56c.402 0 .804-.1 1.206-.301.401-.201.703-.402 1.004-.804.302-.301.502-.703.603-1.105.1-.301.2-.703.1-1.105Z" />
-    </svg>
+    <ph-user :size="width" />
 </template>

package/app/components/icon/phone.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPhone',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhPhone } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M4.906 1.635c.808-.811 2.202-.9 3.021.045l3.359 3.877a.83.83 0 0 1 .024.027c.74.854.588 2.086-.148 2.825l-.001.002-1.073 1.073a13.558 13.558 0 0 0 4.412 4.418l1.074-1.076c.737-.738 1.965-.89 2.818-.159l3.92 3.365c.952.819.865 2.219.053 3.03l-2.807 2.813c-1.102 1.102-2.785 1.461-4.188.78A30.207 30.207 0 0 1 1.345 8.61c-.68-1.404-.322-3.086.779-4.188l2.782-2.787Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M4.905 1.635c.81-.811 2.203-.9 3.022.045l3.359 3.877.024.027c.74.854.588 2.086-.148 2.825l-.001.002-1.073 1.073a13.558 13.558 0 0 0 4.412 4.418l1.074-1.076c.737-.738 1.965-.89 2.818-.159l3.92 3.365c.952.819.865 2.219.053 3.03l-2.807 2.813c-1.102 1.102-2.785 1.461-4.188.78A30.207 30.207 0 0 1 1.345 8.61c-.68-1.404-.322-3.086.778-4.188m0 0 2.782-2.787m9.29 12.573.008-.009-.008.009Zm-4.411-4.42.009-.009a.524.524 0 0 1-.009.01Zm.01-2.903v.002-.002Zm0 .005L6.424 3l-.005-.001a.146.146 0 0 0-.098.048L3.54 5.835c-.555.555-.67 1.334-.394 1.903v.002a28.208 28.208 0 0 0 13.097 13.115c.569.276 1.346.161 1.9-.393l2.809-2.813a.151.151 0 0 0 .049-.107l-3.905-3.352h-.011a.153.153 0 0 0-.094.048l-1.358 1.36a1.461 1.461 0 0 1-1.74.269l-.014-.008-.012-.006a15.557 15.557 0 0 1-5.742-5.76 1.463 1.463 0 0 1 .268-1.74l1.352-1.354a.161.161 0 0 0 .05-.098V6.89Zm7.305 7.3h-.002.002Zm-.01-.005Z" />
-    </svg>
+    <ph-phone :size="width" />
 </template>

package/app/components/icon/play.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPlay',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhPlay } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M6.257 3.033c.09.024.176.06.254.107l14.196 8.153a1.004 1.004 0 0 1 .205 1.117.996.996 0 0 1-.43.467l-13.97 7.982a.993.993 0 0 1-.614.136.995.995 0 0 1-.711-.413.996.996 0 0 1-.187-.6V4.018a.994.994 0 0 1 .498-.883.994.994 0 0 1 .759-.102Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M6.511 3.14a.994.994 0 0 0-1.013-.005.994.994 0 0 0-.498.883v15.964a.994.994 0 0 0 .498.883.994.994 0 0 0 1.013-.005l13.97-7.983a.997.997 0 0 0 .387-1.373c-.045-.08-.1-.15-.16-.211M17.983 12 7 18.277V5.723L17.984 12Z" />
-    </svg>
+    <ph-play :size="width" />
 </template>

package/app/components/icon/plus.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconPlus',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhPlus } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a1 1 0 0 1 1 1v7h7a1 1 0 1 1 0 2h-7v7a1 1 0 1 1-2 0v-7H4a1 1 0 1 1 0-2h7V4a1 1 0 0 1 1-1Z" />
-    </svg>
+    <ph-plus :size="width" />
 </template>