@energysage/es-ds-components 5.0.2 → 5.2.0

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>

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>