@energysage/es-ds-components 5.1.0 → 5.2.0

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>

package/app/components/icon/upload.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconUpload',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhUploadSimple } 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 48 48"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-            fill="currentColor"
-            d="M1.5 30.734c.398 0 .78.182 1.06.506.282.324.44.763.44 1.22v8.634c0 .916.316 1.794.879 2.441.562.648 1.325 1.012 2.121 1.012h36c.796 0 1.559-.364 2.121-1.012.563-.647.879-1.525.879-2.441V32.46c0-.458.158-.897.44-1.221a1.408 1.408 0 0 1 1.06-.506c.398 0 .78.182 1.06.506.282.324.44.763.44 1.22v8.634c0 1.831-.632 3.588-1.757 4.883C45.117 47.272 43.59 48 42 48H6c-1.591 0-3.117-.728-4.243-2.023C.632 44.682 0 42.925 0 41.094V32.46c0-.458.158-.897.44-1.221a1.408 1.408 0 0 1 1.06-.506Z" />
-        <path
-            fill="currentColor"
-            d="M22.94.507c.14-.16.305-.288.487-.375a1.331 1.331 0 0 1 1.15 0c.182.087.348.214.487.375l9 10.36c.282.324.44.764.44 1.222 0 .459-.158.898-.44 1.223a1.41 1.41 0 0 1-1.062.506 1.41 1.41 0 0 1-1.062-.506l-6.438-7.414V36.26c0 .458-.158.897-.44 1.221a1.408 1.408 0 0 1-1.06.506c-.398 0-.78-.182-1.06-.506a1.867 1.867 0 0 1-.44-1.22V5.897l-6.438 7.414c-.14.16-.305.287-.487.374a1.332 1.332 0 0 1-1.15 0 1.507 1.507 0 0 1-.487-.374c-.14-.161-.25-.352-.326-.561a1.958 1.958 0 0 1 0-1.323c.076-.21.186-.4.326-.561l9-10.36Z" />
-    </svg>
+    <ph-upload-simple :size="width" />
 </template>

package/app/components/icon/verified.vue

@@ -1,40 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconVerified',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSealCheck } 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,
-        }"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24">
-        <path
-            d="M21.231 11.156v.85a9.231 9.231 0 1 1-5.474-8.438m5.474 1.053-9.23 9.24-2.77-2.77"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-    </svg>
+    <ph-seal-check :size="width" />
 </template>

package/app/components/icon/wifi.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconWifi',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhWifiHigh } 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 6c-3.161 0-6.406 1.5-9.257 4.669A1 1 0 1 1 1.257 9.33C4.406 5.831 8.16 4 12 4c3.839 0 7.594 1.832 10.743 5.331a1 1 0 1 1-1.486 1.338C18.406 7.5 15.16 5.999 12 5.999Zm0 6c-1.761 0-3.606.835-5.257 2.669a1 1 0 1 1-1.486-1.338C7.206 11.165 9.56 10 12 10s4.794 1.165 6.743 3.331a1 1 0 1 1-1.486 1.338C15.606 12.835 13.76 12 12 12Zm-2 6a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z" />
-    </svg>
+    <ph-wifi-high :size="width" />
 </template>

package/app/components/icon/x.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'XIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhX } 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="M5.293 5.293a1 1 0 0 1 1.414 0L12 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-x :size="width" />
 </template>

package/nuxt.config.ts

@@ -4,7 +4,7 @@ export default defineNuxtConfig({
 
     // prevents "Cannot read properties of null (reading 'ce')" in SSR/SSG with reka-ui
     build: {
-        transpile: ['reka-ui'],
+        transpile: ['@phosphor-icons', 'reka-ui'],
     },
 
     // https://nuxt.com/docs/getting-started/styling#the-css-property

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "5.1.0",
+    "version": "5.2.0",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -19,6 +19,7 @@
     "dependencies": {
         "@energysage/es-ds-styles": "^3.3.4",
         "@nuxtjs/google-fonts": "^3.2.0",
+        "@phosphor-icons/vue": "^2.2.1",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^13.9.0",