@energysage/es-ds-components 5.0.2 → 5.2.0

package/app/components/icon/solar.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconSolar',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSolarPanel } 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="M19.403 13.361h2.584c.394 0 .706-.32.706-.705a.712.712 0 0 0-.706-.706H18.47s-.037-.01-.065-.01h-.87a5.563 5.563 0 0 0-1.127-2.702l3.143-3.143a.708.708 0 0 0 0-.999.708.708 0 0 0-.999 0L15.408 8.24a5.595 5.595 0 0 0-2.712-1.127V2.659a.706.706 0 0 0-.706-.706.712.712 0 0 0-.705.706v4.444A5.56 5.56 0 0 0 8.573 8.23L5.43 5.087a.708.708 0 0 0-.999 0 .708.708 0 0 0 0 .999l3.143 3.143a5.564 5.564 0 0 0-1.127 2.703H5.32s-.037 0-.055.009H2.003a.706.706 0 0 0-.706.705c0 .385.321.706.706.706h2.355l-3.024 9.676a.74.74 0 0 0 .1.632.704.704 0 0 0 .569.293h19.993c.23 0 .44-.11.578-.293a.722.722 0 0 0 .091-.641l-3.253-9.649-.009-.009Zm-9.53 4.728.193-2.016h3.684l.247 2.016H9.874Zm4.298 1.42.367 3.015H9.452l.294-3.015h4.434-.009ZM4.99 16.082h3.656l-.192 2.016H4.358l.632-2.015Zm8.439-2.73.156 1.31h-3.381l.128-1.31h3.097Zm1.76 2.73h3.646l.678 2.016h-4.087l-.247-2.015h.01Zm3.17-1.42h-3.345l-.156-1.31h1.998s.027.01.046.01h1.017l.44 1.3ZM9.03 9.714s.018 0 .027-.018c0 0 .01-.018.019-.028a4.198 4.198 0 0 1 2.932-1.209 4.183 4.183 0 0 1 4.114 3.473H7.885a4.165 4.165 0 0 1 1.137-2.218h.009Zm-1.915 3.647s.027 0 .046-.009h1.75l-.129 1.31H5.43l.403-1.3h1.283ZM3.927 19.51h4.39l-.294 3.015H2.965l.944-3.015h.018Zm12.05 3.015-.367-3.015h4.398l1.017 3.015h-5.049Z" />
-    </svg>
+    <ph-solar-panel :size="width" />
 </template>

package/app/components/icon/sound-down.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconSoundDown',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSpeakerLow } 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="M15 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1Z" />
-        <path
-            d="M9.572 3.614C10.886 2.245 13 3.304 13 5.043v13.914c0 1.753-2.141 2.804-3.446 1.41a1.15 1.15 0 0 1-.018-.02L6.566 17H3c-1.142 0-2-.952-2-2.041V9.04C1 7.951 1.86 7 3 7h3.573l2.971-3.356a.988.988 0 0 1 .028-.03Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m10.998 5.02.002.023v13.914c0 .01 0 .019-.002.024l-2.956-3.33-.014-.017A1.98 1.98 0 0 0 6.58 15H3.012A.064.064 0 0 1 3 14.959V9.04c0-.02.007-.033.012-.04H6.59a1.98 1.98 0 0 0 1.452-.642l2.956-3.339ZM9.572 3.613C10.886 2.245 13 3.304 13 5.043v13.914c0 1.753-2.141 2.804-3.446 1.41l-.018-.02L6.566 17H3c-1.142 0-2-.952-2-2.041V9.04C1 7.951 1.86 7 3 7h3.573l2.971-3.356.028-.03Z" />
-    </svg>
+    <ph-speaker-low :size="width" />
 </template>

package/app/components/icon/sound-off.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconSoundOff',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSpeakerX } 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.572 3.614C10.886 2.245 13 3.304 13 5.043v13.914c0 1.753-2.141 2.804-3.446 1.41a1.15 1.15 0 0 1-.018-.02L6.566 17H3c-1.142 0-2-.952-2-2.041V9.04C1 7.951 1.86 7 3 7h3.573l2.971-3.356a.988.988 0 0 1 .028-.03Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M15.293 8.293a1 1 0 0 1 1.414 0L19 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L20.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L19 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L17.586 12l-2.293-2.293a1 1 0 0 1 0-1.414ZM10.998 5.02l.002.023v13.914c0 .01 0 .019-.002.024l-2.956-3.33-.014-.017A1.98 1.98 0 0 0 6.58 15H3.012A.064.064 0 0 1 3 14.959V9.04c0-.02.007-.033.012-.04H6.59a1.98 1.98 0 0 0 1.452-.642l2.956-3.339ZM9.572 3.613C10.886 2.245 13 3.304 13 5.043v13.914c0 1.753-2.141 2.804-3.446 1.41l-.018-.02L6.566 17H3c-1.142 0-2-.952-2-2.041V9.04C1 7.951 1.86 7 3 7h3.573l2.971-3.356.028-.03Z" />
-    </svg>
+    <ph-speaker-x :size="width" />
 </template>

package/app/components/icon/sound-on.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconSoundOn',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSpeakerNone } 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.572 3.614C10.886 2.245 13 3.304 13 5.043v13.914c0 1.753-2.141 2.804-3.446 1.41a1.15 1.15 0 0 1-.018-.02L6.566 17H3c-1.142 0-2-.952-2-2.041V9.04C1 7.951 1.86 7 3 7h3.573l2.971-3.356a.988.988 0 0 1 .028-.03Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m10.998 5.02.002.023v13.914c0 .01 0 .019-.002.024l-2.956-3.33-.014-.017A1.98 1.98 0 0 0 6.58 15H3.012A.064.064 0 0 1 3 14.959V9.04c0-.02.007-.033.012-.04H6.59a1.98 1.98 0 0 0 1.452-.642l2.956-3.339ZM9.572 3.613C10.886 2.245 13 3.304 13 5.043v13.914c0 1.753-2.141 2.804-3.446 1.41l-.018-.02L6.566 17H3c-1.142 0-2-.952-2-2.041V9.04C1 7.951 1.86 7 3 7h3.573l2.971-3.356.028-.03Zm8.705.695a1 1 0 0 1 1.414-.032c4.396 4.198 4.43 11.269-.005 15.45a1 1 0 1 1-1.372-1.455c3.59-3.384 3.575-9.13-.005-12.549a1 1 0 0 1-.032-1.414ZM15.4 7.7a1 1 0 0 1 1.4.201c.836 1.115 1.2 2.655 1.2 4.1 0 1.445-.364 2.985-1.2 4.1a1 1 0 0 1-1.6-1.2c.497-.663.8-1.734.8-2.9s-.303-2.237-.8-2.9a1 1 0 0 1 .2-1.4Z" />
-    </svg>
+    <ph-speaker-none :size="width" />
 </template>

package/app/components/icon/sound-up.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconSoundUp',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSpeakerHigh } 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.572 3.614C10.886 2.245 13 3.304 13 5.043v13.914c0 1.753-2.141 2.804-3.446 1.41a1.15 1.15 0 0 1-.018-.02L6.566 17H3c-1.142 0-2-.952-2-2.041V9.04C1 7.951 1.86 7 3 7h3.573l2.971-3.356a.988.988 0 0 1 .028-.03Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M19 8a1 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-2h2V9a1 1 0 0 1 1-1Zm-8.002-2.98.002.023v13.914c0 .01 0 .019-.002.024l-2.956-3.33-.014-.017A1.98 1.98 0 0 0 6.58 15H3.012A.064.064 0 0 1 3 14.959V9.04c0-.02.007-.033.012-.04H6.59a1.98 1.98 0 0 0 1.452-.642l2.956-3.339ZM9.572 3.613C10.886 2.245 13 3.304 13 5.043v13.914c0 1.753-2.141 2.804-3.446 1.41l-.018-.02L6.566 17H3c-1.142 0-2-.952-2-2.041V9.04C1 7.951 1.86 7 3 7h3.573l2.971-3.356.028-.03Z" />
-    </svg>
+    <ph-speaker-high :size="width" />
 </template>

package/app/components/icon/star-empty.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconStarEmpty',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '20px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '20px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhStar } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '20px',
+    width: '20px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="white">
-        <path
-            d="M10 1.30198L12.0661 6.26946C12.2101 6.61569 12.5357 6.85226 12.9095 6.88223L18.2723 7.31216L14.1864 10.8122C13.9016 11.0561 13.7773 11.4389 13.8643 11.8037L15.1126 17.0368L10.5213 14.2325C10.2012 14.037 9.79876 14.037 9.47874 14.2325L4.88743 17.0368L6.13574 11.8037C6.22275 11.4389 6.09838 11.0561 5.81359 10.8122L1.72769 7.31216L7.0905 6.88223C7.46429 6.85226 7.7899 6.61569 7.93391 6.26946L10 1.30198Z"
-            stroke="currentColor"
-            stroke-linejoin="round" />
-    </svg>
+    <ph-star :size="width" />
 </template>

package/app/components/icon/star-full.vue

@@ -1,36 +1,18 @@
-<script lang="ts">
-export default {
-    name: 'IconStarFull',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '20px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '20px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhStar } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '20px',
+    width: '20px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor">
-        <path
-            d="M9.53834 1.10996C9.70914 0.699318 10.2909 0.699318 10.4617 1.10996L12.5278 6.07744C12.5998 6.25056 12.7626 6.36885 12.9495 6.38383L18.3123 6.81376C18.7556 6.8493 18.9354 7.40256 18.5976 7.69189L14.5117 11.1919C14.3693 11.3139 14.3071 11.5053 14.3506 11.6876L15.5989 16.9208C15.7021 17.3534 15.2315 17.6954 14.8519 17.4635L10.2606 14.6592C10.1006 14.5615 9.89938 14.5615 9.73937 14.6592L5.14806 17.4635C4.76851 17.6954 4.29788 17.3534 4.40108 16.9208L5.64939 11.6876C5.69289 11.5053 5.6307 11.3139 5.48831 11.1919L1.40241 7.69189C1.06464 7.40256 1.24441 6.8493 1.68773 6.81376L7.05054 6.38383C7.23744 6.36885 7.40024 6.25056 7.47225 6.07744L9.53834 1.10996Z" />
-    </svg>
+    <ph-star
+        :size="width"
+        weight="fill" />
 </template>

package/app/components/icon/star-half.vue

@@ -1,55 +1,18 @@
-<script lang="ts">
-export default {
-    name: 'IconStarHalf',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '20px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '20px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhStarHalf } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '20px',
+    width: '20px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20">
-        <mask
-            id="halfFull"
-            style="mask-type: alpha"
-            maskUnits="userSpaceOnUse"
-            x="0"
-            y="0"
-            :width="width"
-            :height="height">
-            <path
-                d="M10 0L12.645 6.35942L19.5106 6.90983L14.2798 11.3906L15.8779 18.0902L10 14.5L4.12215 18.0902L5.72025 11.3906L0.489435 6.90983L7.35497 6.35942L10 0Z"
-                fill="currentColor" />
-        </mask>
-        <g mask="url(#halfFull)">
-            <path
-                d="M10 1.30198L12.0661 6.26946C12.2101 6.61569 12.5357 6.85226 12.9095 6.88223L18.2723 7.31216L14.1864 10.8122C13.9016 11.0561 13.7773 11.4389 13.8643 11.8037L15.1126 17.0368L10.5213 14.2325C10.2012 14.037 9.79876 14.037 9.47874 14.2325L4.88743 17.0368L6.13574 11.8037C6.22275 11.4389 6.09838 11.0561 5.81359 10.8122L1.72769 7.31216L7.0905 6.88223C7.46429 6.85226 7.7899 6.61569 7.93391 6.26946L10 1.30198Z"
-                fill="white"
-                stroke="currentColor"
-                stroke-linejoin="round" />
-            <path
-                d="M9.9051 14.2195V2.50412C9.9051 1.95741 9.15339 1.80732 8.94344 2.31211L7.37735 6.07744C7.30534 6.25056 7.14254 6.36885 6.95564 6.38383L1.59283 6.81376C1.1495 6.8493 0.969741 7.40256 1.30751 7.69189L5.3934 11.1919C5.5358 11.3139 5.59799 11.5053 5.55448 11.6876L4.30617 16.9208C4.20298 17.3534 4.67361 17.6954 5.05315 17.4635L9.66572 14.6462C9.81441 14.5554 9.9051 14.3937 9.9051 14.2195Z"
-                fill="currentColor" />
-        </g>
-    </svg>
+    <ph-star-half
+        :size="width"
+        weight="fill" />
 </template>

package/app/components/icon/thumbs-up.vue

@@ -1,39 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconThumbsUp',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhThumbsUp } 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="M21.746 9.487c.601.4 1.002 1.1 1.203 1.802.2 1-.2 1.901-1.003 3.703l-.3.8c-.201.301-.201.702-.201 1.002.2 1.601-.401 3.303-1.605 4.504C18.838 22.4 17.434 23 15.93 23h-.301L5.2 22.5c-1.203-.1-2.005-.1-2.808-.801-.702-.701-.902-1.402-1.103-2.403-.4-2.202-.4-4.404.1-6.506.402-1.702 2.006-2.703 3.811-2.502 1.203.2 2.507-.2 3.51-1.001 1.103-.901 1.805-2.102 1.905-3.504l.2-2.402c.1-.801.502-1.502 1.104-1.902.601-.4 1.303-.6 2.005-.4 1.705.5 3.008 2.102 3.008 4.003v3.804h1.103c1.906 0 2.908 0 3.71.6Z"
-            fill="none" />
-        <path
-            d="M22.949 11.289c-.2-.701-.602-1.402-1.203-1.802-.803-.6-1.805-.6-3.71-.6h-1.104V5.081c0-1.901-1.303-3.503-3.008-4.003-.702-.2-1.404 0-2.005.4-.602.4-1.003 1.101-1.104 1.902l-.2 2.402c-.1 1.402-.802 2.603-1.905 3.504-1.003.8-2.307 1.2-3.51 1-1.805-.2-3.41.801-3.81 2.503-.502 2.102-.502 4.304-.1 6.506.2 1.001.4 1.702 1.102 2.403.803.7 1.605.7 2.808.8L15.63 23h.3c1.505 0 2.909-.6 3.911-1.702 1.204-1.2 1.805-2.902 1.605-4.504 0-.3 0-.7.2-1.001l.301-.8c.802-1.803 1.203-2.704 1.003-3.704ZM3.696 20.096c-.2-.2-.3-.4-.501-1.301-.402-1.902-.402-3.804.1-5.606.2-.7.802-1 1.404-1H5.7a16.26 16.26 0 0 0 0 8.208h-.4c-1.104 0-1.404-.1-1.605-.3Zm16.445-5.906-.3.801a6.26 6.26 0 0 0-.302 1.902c.1 1.101-.3 2.202-1.103 3.003-.701.7-1.704 1.101-2.707 1.101l-7.922-.5c-.902-2.703-.902-5.606-.1-8.309l.1-.4c.702-.2 1.404-.6 2.006-1.101 1.504-1.201 2.406-2.903 2.607-4.905l.2-2.402c0-.2.201-.4.201-.4.1 0 .2-.1.401-.1.903.2 1.605 1.1 1.605 2.101v3.003c0 .801 0 1.302.3 1.802.2.3.401.5.702.7.502.301 1.003.301 1.805.301h.401c1.204 0 2.206 0 2.507.2.2.1.301.4.401.6.1.501-.3 1.402-.802 2.603Z" />
-    </svg>
+    <ph-thumbs-up :size="width" />
 </template>

package/app/components/icon/trash-can.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconTrashCan',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhTrash } 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="M18.62 5.081h3.384c.598 0 .996.399.996.996s-.398.995-.995.995H20.91l-1.494 13.24c-.1.697-.398 1.394-.995 1.892-.598.497-1.294.796-2.09.796H7.57c-.698 0-1.395-.299-1.992-.796-.597-.498-.896-1.195-.995-1.892L3.09 7.072H1.994c-.597 0-.995-.398-.995-.995s.398-.996.995-.996H5.38l1.095-2.29c.2-.497.597-.995 1.095-1.293C8.068 1.199 8.566 1 9.163 1h5.674c.597 0 1.095.2 1.593.498s.896.697 1.095 1.294l1.095 2.29Z"
-            fill="none" />
-        <path
-            d="M22.005 5.081H18.62l-1.095-2.29c-.2-.596-.597-.995-1.095-1.293-.498-.299-.996-.498-1.593-.498H9.163c-.597 0-1.095.2-1.593.498a2.752 2.752 0 0 0-1.095 1.294L5.38 5.082H1.995c-.597 0-.995.398-.995.995s.398.995.995.995H3.09l1.494 13.24c.1.697.398 1.394.995 1.892.597.497 1.294.796 1.991.796h8.76c.797 0 1.494-.299 2.09-.796.598-.498.897-1.195.996-1.892l1.494-13.24h1.095c.597 0 .995-.398.995-.995s-.398-.996-.995-.996ZM8.267 3.588c0-.1.2-.298.398-.298.1-.1.299-.2.498-.2h5.575c.199 0 .298.1.497.2.2.1.299.199.399.398l.696 1.393H7.57l.697-1.493Zm9.158 16.525c0 .2-.1.398-.298.597-.2.2-.498.3-.697.3H7.57c-.299 0-.498-.1-.697-.3-.199-.1-.298-.398-.298-.597L5.08 7.073h13.84l-1.494 13.04Z" />
-        <path
-            d="M13.941 17.027a.998.998 0 0 0 .996-.995v-4.978c0-.597-.398-.995-.996-.995-.597 0-.995.398-.995.995v4.978c0 .597.398.995.995.995Zm-3.981 0a.997.997 0 0 0 .995-.995v-4.978c0-.597-.398-.995-.996-.995-.597 0-.995.398-.995.995v4.978c0 .597.398.995.995.995Z" />
-    </svg>
+    <ph-trash :size="width" />
 </template>

package/app/components/icon/tree.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconTree',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhTree } 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="M18.906 15.424c0-1.31-.573-2.552-1.618-3.528.197-.463.3-.95.3-1.448 0-1.121-.514-2.183-1.44-2.997a3.2 3.2 0 0 0 .523-1.738c.009-2.073-2.09-3.76-4.667-3.76-2.578 0-4.676 1.687-4.676 3.76 0 .608.18 1.207.523 1.738-.925.814-1.439 1.876-1.439 2.997 0 .489.103.985.3 1.448-1.045.985-1.619 2.218-1.619 3.528 0 2.809 2.68 5.13 6.115 5.438v2.364a.727.727 0 1 0 1.456 0V20.87c3.502-.266 6.242-2.612 6.242-5.456v.009Zm-6.242 3.99v-6.456s.06-.035.085-.052l2.312-2.312a.729.729 0 0 0 0-1.028.729.729 0 0 0-1.027 0l-1.362 1.362V9.541a.727.727 0 1 0-1.456 0v5.737l-1.147-1.147a.729.729 0 0 0-1.028 0 .729.729 0 0 0 0 1.027l2.184 2.184v2.064c-2.63-.282-4.659-1.961-4.659-3.973 0-1.037.54-2.021 1.516-2.775a.722.722 0 0 0 .171-.96 2.274 2.274 0 0 1-.368-1.232c0-.857.514-1.679 1.413-2.261a.733.733 0 0 0 .334-.54.72.72 0 0 0-.214-.59C9.135 6.8 8.8 6.337 8.8 5.73c0-1.276 1.448-2.304 3.22-2.304 1.773 0 3.22 1.037 3.22 2.304 0 .608-.334 1.07-.616 1.344a.73.73 0 0 0-.214.591.73.73 0 0 0 .334.54c.899.574 1.412 1.396 1.412 2.252 0 .428-.128.848-.368 1.233a.72.72 0 0 0 .171.96c.977.753 1.516 1.746 1.516 2.774 0 2.055-2.098 3.75-4.787 3.99h-.025Z" />
-    </svg>
+    <ph-tree :size="width" />
 </template>