@energysage/es-ds-components 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [5.2.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.1.0...es-ds-components-v5.2.0) (2026-03-27)
+
+
+### Features
+
+* update to Phosphor icon library ([#1689](https://github.com/EnergySage/es-ds/issues/1689)) ([78bd39b](https://github.com/EnergySage/es-ds/commit/78bd39b2e3325722bfa71e660961cba0de2766ed))
+
+
+### Bug Fixes
+
+* ensure shadow is not visible when sticky bar is hidden ([#1720](https://github.com/EnergySage/es-ds/issues/1720)) ([68a7396](https://github.com/EnergySage/es-ds/commit/68a73966dba1eabb170eb0e0cb8ae5a22b6057f7))
+
 ## [5.1.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.0.2...es-ds-components-v5.1.0) (2026-03-27)
 
 

package/app/components/es-sticky-bar.vue

@@ -161,6 +161,7 @@ $shadow: 0 0 6px 0 rgba(34, 38, 51, 0.2);
 
     // translated off screen above the viewport
     &--fixed-hidden {
+        box-shadow: none;
         transform: translateY(-100%);
     }
 

package/app/components/icon/arrow-clockwise.vue

@@ -1,51 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconArrowClockwise',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        orientation: {
-            type: String,
-            default: 'clockwise',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowClockwise } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :class="{
-            'counter-clockwise': orientation === 'counter-clockwise',
-        }"
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <!-- eslint-disable-next-line max-len -->
-        <path
-            d="M3.246 7.123c.997-1.81 2.591-3.418 4.485-4.222 1.894-.905 4.087-1.106 6.08-.704 2.193.403 3.788 1.408 5.183 3.016.2.201.4.503.598.704l.4-2.513c.099-.603.597-.905 1.195-.905.499.1.897.704.798 1.206l-.897 5.127c0 .301-.2.502-.4.603-.198.1-.398.201-.597.201h-.2l-4.983-.905a1.042 1.042 0 0 1-.798-1.206c.1-.503.598-.905 1.197-.804l2.79.603c-.1-.302-.299-.503-.598-.804-1.096-1.307-2.492-2.111-4.086-2.413-1.595-.402-3.39-.2-4.884.503A7.896 7.896 0 0 0 4.94 8.028c-.797 1.507-1.096 3.216-.897 4.925.2 1.709.897 3.317 2.093 4.524 1.097 1.206 2.692 2.11 4.286 2.311 1.595.302 3.39 0 4.785-.703a8.444 8.444 0 0 0 3.488-3.518c.2-.503.798-.704 1.296-.503.498.201.698.804.498 1.307-.797 2.11-2.292 3.619-4.186 4.624-1.395.703-2.89 1.005-4.485 1.005-.598 0-1.096 0-1.695-.1-2.093-.403-3.987-1.408-5.382-2.916a10.256 10.256 0 0 1-2.691-5.629c-.2-2.211.2-4.322 1.196-6.232Z" />
-    </svg>
+    <ph-arrow-clockwise :size="width" />
 </template>
-
-<style lang="scss" scoped>
-.counter-clockwise {
-    transform: scale(-1, 1);
-}
-</style>

package/app/components/icon/arrow-counter-clockwise.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'ArrowCounterClockwiseIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowCounterClockwise } 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">
-        <!-- eslint-disable-next-line max-len -->
-        <path
-            d="M20.754 7.123c-.997-1.81-2.591-3.418-4.485-4.222-1.894-.905-4.087-1.106-6.08-.704C7.996 2.6 6.4 3.605 5.006 5.213c-.2.201-.4.503-.598.704l-.4-2.513c-.099-.603-.597-.905-1.195-.905-.499.1-.897.704-.798 1.206l.897 5.127c0 .301.2.502.4.603.198.1.398.201.597.201h.2l4.983-.905c.499-.1.897-.603.798-1.206a1.034 1.034 0 0 0-1.196-.804l-2.791.603c.1-.302.299-.503.598-.804 1.096-1.307 2.492-2.111 4.086-2.413 1.595-.402 3.39-.2 4.884.503a7.896 7.896 0 0 1 3.589 3.418c.797 1.507 1.096 3.216.897 4.925-.2 1.709-.897 3.317-2.094 4.524-1.096 1.206-2.69 2.11-4.285 2.311-1.595.302-3.39 0-4.785-.703a8.444 8.444 0 0 1-3.488-3.518c-.2-.503-.798-.704-1.296-.503-.499.201-.698.804-.499 1.307.798 2.11 2.293 3.619 4.187 4.624 1.395.703 2.89 1.005 4.485 1.005.598 0 1.096 0 1.695-.1 2.093-.403 3.986-1.408 5.382-2.916a10.257 10.257 0 0 0 2.691-5.629c.2-2.211-.2-4.322-1.196-6.232Z" />
-    </svg>
+    <ph-arrow-counter-clockwise :size="width" />
 </template>

package/app/components/icon/arrow-cycle.vue

@@ -1,43 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconArrowCycle',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowsClockwise } 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="M11.806 3C6.929 3 3 6.565 3 12a1 1 0 1 1-2 0C1 5.435 5.85 1 11.806 1c4.759 0 8.742 2.543 10.141 6.68a1 1 0 0 1-1.894.64C18.973 5.127 15.853 3 11.806 3ZM22 11a1 1 0 0 1 1 1c0 6.565-4.85 11-10.806 11-4.758 0-8.742-2.543-10.141-6.68a1 1 0 0 1 1.894-.64c1.08 3.193 4.2 5.32 8.247 5.32C17.071 21 21 17.435 21 12a1 1 0 0 1 1-1Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M22.242 3.03a1 1 0 0 1 .728 1.213l-1 4a1 1 0 0 1-1.212.727l-4-1a1 1 0 1 1 .485-1.94l3.03.757.757-3.03a1 1 0 0 1 1.212-.727ZM2.03 15.758a1 1 0 0 1 1.213-.728l4 1a1 1 0 1 1-.486 1.94l-3.03-.757-.757 3.03a1 1 0 1 1-1.94-.485l1-4Z" />
-    </svg>
+    <ph-arrows-clockwise :size="width" />
 </template>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { PhArrowDown } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
+</script>
+
+<template>
+    <ph-arrow-down :size="width" />
+</template>

package/app/components/icon/arrow-left.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'ArrowLeftIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowLeft } 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="M11.707 4.293a1 1 0 0 1 0 1.414L6.414 11H20a1 1 0 1 1 0 2H6.414l5.293 5.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" />
-    </svg>
+    <ph-arrow-left :size="width" />
 </template>

package/app/components/icon/arrow-right.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'ArrowRightIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowRight } 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.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-5.293-5.293a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-arrow-right :size="width" />
 </template>

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

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'ArrowUpIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowUp } 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="M11.293 3.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1-1.414 1.414L13 6.414V20a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414l7-7Z" />
-    </svg>
+    <ph-arrow-up :size="width" />
 </template>

package/app/components/icon/bell.vue

@@ -1,42 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconBell',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhBell } 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="M15 4v.375c2.818.934 4.978 3.525 5.015 6.614v3.8c0 .724.098 1.259.368 1.671l.286.437c.857 1.305-.045 3.103-1.654 3.103h-3.142a3.999 3.999 0 0 1-7.746 0H4.985c-1.606 0-2.513-1.796-1.654-3.103h.001l.286-.438c.27-.411.367-.944.367-1.669v-3.797C4.007 7.897 6.17 5.284 9 4.359V4a3 3 0 1 1 6 0Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a1 1 0 0 0-1 1h2a1 1 0 0 0-1-1Zm3 1.375V4a3 3 0 0 0-6 0v.359c-2.83.925-4.993 3.538-5.015 6.634v3.797c0 .725-.097 1.258-.367 1.67l-.286.436v.001C2.471 18.204 3.378 20 4.984 20h3.142a4 4 0 0 0 7.746 0h3.142c1.61 0 2.511-1.798 1.654-3.103l-.286-.437c-.27-.412-.368-.947-.368-1.671v-3.8c-.037-3.09-2.197-5.68-5.015-6.614ZM11.223 6h.038l1.458.003c2.84.007 5.26 2.305 5.296 5.004v3.782c0 .856.104 1.865.695 2.767l.287.438A.15.15 0 0 1 19 18H5l.003-.004v-.002l.287-.438c.592-.902.695-1.911.695-2.766v-3.786C6.006 8.313 8.404 6.01 11.223 6Zm2.51 14h-3.465A1.997 1.997 0 0 0 12 21a2 2 0 0 0 1.732-1Z" />
-    </svg>
+    <ph-bell :size="width" />
 </template>

package/app/components/icon/block.vue

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconBlock',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhProhibit } 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="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m19.707 5.707-14 14-1.414-1.414 14-14 1.414 1.414Z" />
-    </svg>
+    <ph-prohibit :size="width" />
 </template>

package/app/components/icon/bolt.vue

@@ -1,38 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconBolt',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhLightning } 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="M16.986 11.967a.852.852 0 0 0-.739-.425h-2.793l.475-8.695a.845.845 0 0 0-.654-.874.854.854 0 0 0-.976.492L6.967 14.998a.836.836 0 0 0 .076.798.845.845 0 0 0 .705.382h2.3l-.789 6.835a.845.845 0 0 0 .84.943.844.844 0 0 0 .74-.425l6.147-10.715a.844.844 0 0 0 0-.85Zm-5.57 7.14.425-3.684a.86.86 0 0 0-.213-.663.854.854 0 0 0-.637-.28H9.03l2.946-6.912-.254 4.772a.828.828 0 0 0 .229.629c.161.17.382.263.62.263h2.216l-3.363 5.867-.008.009Z" />
-    </svg>
+    <ph-lightning :size="width" />
 </template>

package/app/components/icon/calculator.vue

@@ -1,37 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCalculator',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCalculator } 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="M20.1792 2H3.82079C3.36936 2 3 2.33733 3 2.74963V21.2504c0 .4123.36936.7496.82079.7496H20.1792c.4514 0 .8208-.3373.8208-.7496V2.74963C21 2.33733 20.6306 2 20.1792 2Zm-.8208 18.5007H4.64159V3.49925H19.3584V20.5007ZM5.80711 11.8201c0-.4123.36936-.7496.8208-.7496h1.92065c.45144 0 .8208.3373.8208.7496 0 .4123-.36936.7496-.8208.7496H6.62791c-.45144 0-.8208-.3373-.8208-.7496Zm7.97809 0c0 .4123-.3693.7496-.8208.7496h-1.9206c-.4515 0-.8208-.3373-.8208-.7496 0-.4123.3693-.7496.8208-.7496h1.9206c.4515 0 .8208.3373.8208.7496Zm4.4159 0c0 .4123-.3694.7496-.8208.7496h-1.9207c-.4514 0-.8207-.3373-.8207-.7496 0-.4123.3693-.7496.8207-.7496h1.9207c.4514 0 .8208.3373.8208.7496ZM5.80711 15.1484c0-.4123.36936-.7496.8208-.7496h1.92065c.45144 0 .8208.3373.8208.7496 0 .4123-.36936.7497-.8208.7497H6.62791c-.45144 0-.8208-.3374-.8208-.7497Zm7.97809 0c0 .4123-.3693.7497-.8208.7497h-1.9206c-.4515 0-.8208-.3374-.8208-.7497 0-.4123.3693-.7496.8208-.7496h1.9206c.4515 0 .8208.3373.8208.7496Zm4.4159 0c0 .4123-.3694.7497-.8208.7497h-1.9207c-.4514 0-.8207-.3374-.8207-.7497 0-.4123.3693-.7496.8207-.7496h1.9207c.4514 0 .8208.3373.8208.7496ZM5.80711 18.4768c0-.4123.36936-.7497.8208-.7497h1.92065c.45144 0 .8208.3374.8208.7497 0 .4123-.36936.7496-.8208.7496H6.62791c-.45144 0-.8208-.3373-.8208-.7496Zm7.97809 0c0 .4123-.3693.7496-.8208.7496h-1.9206c-.4515 0-.8208-.3373-.8208-.7496 0-.4123.3693-.7497.8208-.7497h1.9206c.4515 0 .8208.3374.8208.7497Zm4.4159 0c0 .4123-.3694.7496-.8208.7496h-1.9207c-.4514 0-.8207-.3373-.8207-.7496 0-.4123.3693-.7497.8207-.7497h1.9207c.4514 0 .8208.3374.8208.7497ZM7.01368 9.06897H17.1341c.5827 0 1.067-.42729 1.067-.95203v-2.3913c0-.52474-.4761-.95203-1.067-.95203H7.01368c-.58276 0-1.06703.42729-1.06703.95203v2.3913c0 .52474.47606.95203 1.06703.95203Zm.57456-2.79611h8.96306v1.29686H7.59644V6.27286h-.0082Z" />
-    </svg>
+    <ph-calculator :size="width" />
 </template>

package/app/components/icon/calendar.vue

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconCalendar',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCalendarDots } 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 3a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h12a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H6Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M6 5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6ZM1 8a5 5 0 0 1 5-5h12a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H6a5 5 0 0 1-5-5V8Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8 1a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1Zm8 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V2a1 1 0 0 1 1-1ZM1 10a1 1 0 0 1 1-1h20a1 1 0 1 1 0 2H2a1 1 0 0 1-1-1Z" />
-    </svg>
+    <ph-calendar-dots :size="width" />
 </template>