@energysage/es-ds-components 5.1.0 → 5.3.0

package/app/components/icon/roof.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconRoof',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSolarRoof } 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="M22.9562 11.8416L19.9239 4.55211C19.8126 4.278 19.547 4.10669 19.2558 4.10669L4.03442 4.19235C3.79458 4.19235 3.56331 4.31227 3.43482 4.51785C3.29777 4.72342 3.28064 4.9804 3.36629 5.20311L3.88024 6.43658C3.88024 6.43658 3.81171 6.5051 3.78602 6.54793L1.09636 11.182C0.967878 11.4047 0.967878 11.6874 1.09636 11.9101C1.22485 12.1328 1.46469 12.2699 1.73023 12.2699H3.30633V19.1653C3.30633 19.5679 3.63183 19.8934 4.03442 19.8934C4.43701 19.8934 4.76251 19.5679 4.76251 19.1653V11.5418C4.76251 11.1392 4.43701 10.8137 4.03442 10.8137H2.9894L4.5655 8.08121L6.39858 12.4754C6.50993 12.7496 6.77547 12.9209 7.06671 12.9209L19.5128 12.8523C19.5128 12.8523 19.4871 12.9294 19.4871 12.9723V19.1567C19.4871 19.5593 19.8126 19.8848 20.2152 19.8848C20.6178 19.8848 20.9433 19.5593 20.9433 19.1567V12.9723C20.9433 12.9294 20.9261 12.8866 20.9176 12.8523H22.2795C22.5194 12.8523 22.7506 12.7239 22.8791 12.5183C23.0162 12.3127 23.0333 12.0557 22.9476 11.833L22.9562 11.8416ZM7.55496 11.4733L5.12228 5.63996L18.759 5.56287L21.1917 11.3962L7.55496 11.4733Z" />
-    </svg>
+    <ph-solar-roof :size="width" />
 </template>

package/app/components/icon/search.vue

@@ -1,43 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconSearch',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhMagnifyingGlass } 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
-            fill-rule="evenodd"
-            d="M10.5 3.545a6.955 6.955 0 1 0 0 13.91 6.955 6.955 0 0 0 0-13.91ZM2 10.5a8.5 8.5 0 1 1 17 0 8.5 8.5 0 0 1-17 0Z"
-            clip-rule="evenodd" />
-        <path
-            fill-rule="evenodd"
-            d="M15.293 16.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414Z"
-            clip-rule="evenodd" />
-    </svg>
+    <ph-magnifying-glass :size="width" />
 </template>

package/app/components/icon/settings-horizontal.vue

@@ -1,57 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconSettingsHorizontal',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSlidersHorizontal } 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">
-        <circle
-            cx="9"
-            cy="5"
-            r="2"
-            fill="none" />
-        <circle
-            cx="17"
-            cy="12"
-            r="2"
-            fill="none" />
-        <circle
-            cx="7"
-            cy="19"
-            r="2"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M2 5a1 1 0 0 1 1-1h4a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1Zm8 0a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H11a1 1 0 0 1-1-1Zm-8 7a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm16 0a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1ZM2 19a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm6 0a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M9 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM6 5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm11 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-7 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z" />
-    </svg>
+    <ph-sliders-horizontal :size="width" />
 </template>

package/app/components/icon/settings-vertical.vue

@@ -1,57 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconSettingsVertical',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSliders } 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 2a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1Zm7 0a1 1 0 0 1 1 1v12a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm7 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1ZM5 8a1 1 0 0 1 1 1v12a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1Zm14 2a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V11a1 1 0 0 1 1-1Zm-7 8a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1Z" />
-        <circle
-            cx="5"
-            cy="7"
-            r="3"
-            fill="none" />
-        <circle
-            cx="19"
-            cy="9"
-            r="2"
-            fill="none" />
-        <circle
-            cx="12"
-            cy="17"
-            r="2"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M19.999 9.3a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-1-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM13 17a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-1-3a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM6 7a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM5 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z" />
-    </svg>
+    <ph-sliders :size="width" />
 </template>

package/app/components/icon/shield-with-check.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconShieldWithCheck',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhShieldCheck } 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 18 18"
-        fill="none">
-        <path
-            fill="currentColor"
-            d="M15.875 0.4375H2.125C1.76033 0.4375 1.41059 0.582366 1.15273 0.840228C0.894866 1.09809 0.75 1.44783 0.75 1.8125V6.86391C0.75 14.5648 7.26578 17.1197 8.57031 17.5537C8.84894 17.6484 9.15106 17.6484 9.42969 17.5537C10.7359 17.1197 17.25 14.5648 17.25 6.86391V1.8125C17.25 1.44783 17.1051 1.09809 16.8473 0.840228C16.5894 0.582366 16.2397 0.4375 15.875 0.4375ZM15.875 6.86477C15.875 13.604 10.173 15.8555 9 16.2474C7.83727 15.8598 2.125 13.61 2.125 6.86477V1.8125H15.875V6.86477ZM5.07609 9.17391C4.94709 9.0449 4.87462 8.86994 4.87462 8.6875C4.87462 8.50506 4.94709 8.3301 5.07609 8.20109C5.2051 8.07209 5.38006 7.99962 5.5625 7.99962C5.74494 7.99962 5.9199 8.07209 6.04891 8.20109L7.625 9.77719L11.9511 5.45109C12.015 5.38722 12.0908 5.33655 12.1743 5.30198C12.2577 5.26741 12.3472 5.24962 12.4375 5.24962C12.5278 5.24962 12.6173 5.26741 12.7007 5.30198C12.7842 5.33655 12.86 5.38722 12.9239 5.45109C12.9878 5.51497 13.0385 5.5908 13.073 5.67426C13.1076 5.75772 13.1254 5.84717 13.1254 5.9375C13.1254 6.02783 13.1076 6.11728 13.073 6.20074C13.0385 6.2842 12.9878 6.36003 12.9239 6.42391L8.11141 11.2364C8.04756 11.3003 7.97173 11.351 7.88827 11.3856C7.80481 11.4202 7.71535 11.438 7.625 11.438C7.53465 11.438 7.44519 11.4202 7.36173 11.3856C7.27827 11.351 7.20244 11.3003 7.13859 11.2364L5.07609 9.17391Z" />
-    </svg>
+    <ph-shield-check :size="width" />
 </template>

package/app/components/icon/shield.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconShield',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhShield } 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="M11.56 1.102a1 1 0 0 1 .88 0l7.81 3.818a1.837 1.837 0 0 1 .994 1.287 14.395 14.395 0 0 1-5.854 14.641l-1.67 1.168a3 3 0 0 1-3.44 0L8.61 20.85A14.394 14.394 0 0 1 2.757 6.207v-.001A1.837 1.837 0 0 1 3.75 4.92h.001l7.809-3.818Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M11.56 1.102a1 1 0 0 1 .88 0l7.81 3.818a1.837 1.837 0 0 1 .994 1.287 14.395 14.395 0 0 1-5.854 14.641l-1.67 1.168a3 3 0 0 1-3.44 0L8.61 20.85A14.394 14.394 0 0 1 2.757 6.207v-.001A1.837 1.837 0 0 1 3.75 4.92h.001l7.809-3.818Zm1.014 19.276 1.67-1.168a12.395 12.395 0 0 0 5.055-12.528L12 3.113l-7.3 3.57a12.393 12.393 0 0 0 5.057 12.526l1.67 1.169a1 1 0 0 0 1.147 0Z" />
-    </svg>
+    <ph-shield :size="width" />
 </template>

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

@@ -1,39 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconShoppingBag',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhShoppingBag } 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.934 7.8c.599.5.898 1.2.998 2l.898 9.9c0 .4-.1.8-.2 1.2-.1.4-.299.8-.598 1.1-.3.3-.6.5-.998.7-.4.2-.799.3-1.198.3H5.164c-.4 0-.798 0-1.198-.2-.399-.2-.698-.4-.998-.7-.2-.3-.499-.7-.598-1.1-.2-.4-.2-.8-.2-1.2l.699-10c.1-.8.399-1.5.998-2 .598-.5 1.297-.8 2.095-.8h.998V6c0-1.3.5-2.6 1.497-3.5.898-1 2.196-1.5 3.493-1.5 1.297 0 2.595.6 3.493 1.5.998.9 1.497 2.2 1.497 3.5v1h.998c.699 0 1.397.3 1.996.8Z"
-            fill="none" />
-        <path
-            d="M20.932 9.8c-.1-.8-.4-1.5-.998-2-.599-.5-1.297-.8-1.996-.8h-.998V6c0-1.3-.499-2.6-1.497-3.5-.898-.9-2.195-1.5-3.493-1.5-1.297 0-2.595.5-3.493 1.5C7.46 3.4 6.96 4.7 6.96 6v1h-.998c-.798 0-1.497.3-2.095.8-.6.5-.899 1.2-.998 2l-.699 10c0 .4 0 .8.2 1.2.1.4.399.8.598 1.1.3.3.6.5.998.7.4.2.799.2 1.198.2h13.672c.4 0 .799-.1 1.198-.3.399-.2.698-.4.998-.7.299-.3.499-.7.598-1.1.1-.4.2-.8.2-1.2l-.898-9.9ZM8.956 6c0-.8.3-1.6.898-2.1 1.098-1.1 3.094-1.1 4.192 0 .599.6.898 1.3.898 2.1v1H8.956V6Zm10.778 14.4c0 .1-.1.3-.2.4-.1.1-.199.2-.299.2H5.164c-.1 0-.3 0-.4-.1-.1-.1-.199-.1-.299-.2-.1-.1-.2-.2-.2-.3-.1-.2-.1-.3-.1-.4l.8-10c0-.3.1-.5.299-.7.2-.2.399-.3.698-.3h.998v2c0 .6.4 1 .998 1 .599 0 .998-.4.998-1V9h5.988v2c0 .6.4 1 .998 1 .599 0 .998-.4.998-1V9h.998c.3 0 .499.1.699.3.2.2.299.4.299.7l.798 10v.4Z" />
-    </svg>
+    <ph-shopping-bag :size="width" />
 </template>

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>