@energysage/es-ds-components 5.1.0 → 5.3.0

package/app/components/icon/folder.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconFolder',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhFolder } 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="M8.763 2a3 3 0 0 1 2.684 1.659l.894 1.788a1.001 1.001 0 0 0 .895.553H20a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h4.763Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8.763 2a3 3 0 0 1 2.684 1.659l.894 1.788a1.001 1.001 0 0 0 .895.553H20a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h4.763Zm.527 2.15A1 1 0 0 0 8.763 4H4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-6.764a3 3 0 0 1-2.684-1.659L9.66 4.553a1 1 0 0 0-.37-.404Z" />
-    </svg>
+    <ph-folder :size="width" />
 </template>

package/app/components/icon/gear.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconGear',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhGear } 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.447 11.706-1.48-.72-.035-.145 1.276-1.079a.966.966 0 0 0 .265-1.095l-.6-1.515a.984.984 0 0 0-.924-.608l-1.738.043-.05-.069.564-1.746a.967.967 0 0 0-.317-1.053l-1.121-.899a.952.952 0 0 0-1.13-.06l-1.54 1.002-.12-.043-.403-1.84a.975.975 0 0 0-.848-.754L12.851.988a.974.974 0 0 0-.95.497l-.805 1.455-.35.094-.908-1.267a.964.964 0 0 0-1.139-.334l-1.652.66a.964.964 0 0 0-.59 1.112l.308 1.361-.231.189-1.652-.437a.964.964 0 0 0-1.002.334l-.89 1.13a.981.981 0 0 0-.052 1.113l.9 1.395-.104.223-1.669.222a.963.963 0 0 0-.83.83l-.231 1.67a.963.963 0 0 0 .608 1.036l1.498.582.034.282-1.378 1.079a.972.972 0 0 0-.3 1.121l.6 1.515c.162.411.581.642 1.026.6l1.627-.214.197.214-.54 1.754c-.12.403.035.83.377 1.07l1.096.77a.963.963 0 0 0 1.044.035l1.37-.822.385.163.257 1.498a.964.964 0 0 0 .787.788l1.456.248c.043 0 .128.017.17.017a.956.956 0 0 0 .883-.574l.616-1.403.334-.052 1.155 1.293c.274.3.702.402 1.08.248l1.309-.522a.97.97 0 0 0 .608-.959l-.095-1.592.249-.223 1.686.54a.967.967 0 0 0 1.096-.377l.899-1.318a.978.978 0 0 0-.018-1.122l-.924-1.267.086-.214 1.677-.274a.972.972 0 0 0 .805-.821l.231-1.618a.971.971 0 0 0-.53-1.01h-.018Zm-1.087 2.071-1.72.283a.745.745 0 0 0-.557.436l-.402.968a.708.708 0 0 0 .085.71l.968 1.318-.497.728-1.737-.556a.719.719 0 0 0-.703.145l-.821.728a.704.704 0 0 0-.24.59l.094 1.593-.659.265-1.19-1.335a.719.719 0 0 0-.65-.231l-1.122.17a.717.717 0 0 0-.556.429l-.625 1.42-.753-.128L10 19.77a.755.755 0 0 0-.428-.548l-1.088-.463a.718.718 0 0 0-.659.043l-1.42.856-.54-.377.556-1.806a.722.722 0 0 0-.154-.702l-.736-.804a.717.717 0 0 0-.633-.231l-1.627.213-.325-.821 1.412-1.105a.733.733 0 0 0 .274-.65l-.128-1.121a.745.745 0 0 0-.462-.6l-1.55-.599.12-.899 1.704-.222a.72.72 0 0 0 .565-.42l.436-.95a.716.716 0 0 0-.051-.693l-.925-1.439.471-.599 1.704.445a.75.75 0 0 0 .642-.137l.864-.71a.729.729 0 0 0 .248-.728l-.316-1.395.916-.368.967 1.352a.74.74 0 0 0 .779.283l1.138-.3a.725.725 0 0 0 .454-.35l.796-1.447.728.077.41 1.883a.72.72 0 0 0 .454.522l.83.308a.756.756 0 0 0 .651-.068l1.558-1.01.582.47-.573 1.781a.728.728 0 0 0 .111.66l.505.675c.137.18.351.291.582.291h.018l1.771-.042.343.873-1.344 1.138a.736.736 0 0 0-.24.728l.223.916a.716.716 0 0 0 .394.48l1.463.71-.128.916.017-.009Zm-9.365-7.43c-3.09 0-5.598 2.517-5.598 5.615 0 3.1 2.508 5.616 5.598 5.616s5.599-2.517 5.599-5.616c0-3.098-2.509-5.615-5.599-5.615Zm0 9.784c-2.285 0-4.143-1.866-4.143-4.16s1.858-4.16 4.143-4.16c2.286 0 4.143 1.866 4.143 4.16s-1.857 4.16-4.143 4.16Z" />
-    </svg>
+    <ph-gear :size="width" />
 </template>

package/app/components/icon/hamburger.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconHamburger',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhList } 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="M2 5c0-.55228.44772-1 1-1h18c.5523 0 1 .44772 1 1s-.4477 1-1 1H3c-.55228 0-1-.44772-1-1Zm0 7c0-.5523.44772-1 1-1h18c.5523 0 1 .4477 1 1s-.4477 1-1 1H3c-.55228 0-1-.4477-1-1Zm0 7c0-.5523.44772-1 1-1h18c.5523 0 1 .4477 1 1s-.4477 1-1 1H3c-.55228 0-1-.4477-1-1Z" />
-    </svg>
+    <ph-list :size="width" />
 </template>

package/app/components/icon/heart.vue

@@ -1,39 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconHeart',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhHeart } 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="M12 4.5c1-1 2.8-2.5 5-2.5 3.3 0 6 2.7 6 6 0 2.8-1.3 8.3-10 13.6-.3.2-.6.3-1 .3-.3 0-.7-.1-1-.3C2.3 16.3 1 10.8 1 8c0-3.3 2.7-6 6-6 2.2 0 4 1.5 5 2.5Z"
-            fill="none" />
-        <path
-            d="M17 2c-2.2 0-4 1.5-5 2.5C11 3.5 9.2 2 7 2 3.7 2 1 4.7 1 8c0 2.8 1.3 8.3 10 13.6.3.2.7.3 1 .3.4 0 .7-.1 1-.3C21.7 16.3 23 10.8 23 8c0-3.3-2.7-6-6-6Zm-5 17.9C4.2 15.1 3 10.4 3 8c0-2.2 1.8-4 4-4s4.2 2.6 4.2 2.6c.2.3.5.4.8.4.3 0 .6-.1.8-.4 0 0 2-2.6 4.2-2.6s4 1.8 4 4c0 2.4-1.2 7.1-9 11.9Z" />
-    </svg>
+    <ph-heart :size="width" />
 </template>

package/app/components/icon/house-line.vue

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

package/app/components/icon/image.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconImage',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhImageSquare } 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="M2.464 2.464A5 5 0 0 1 6 1h12a5 5 0 0 1 5 5v12a5 5 0 0 1-5 5H6a5 5 0 0 1-5-5V6a5 5 0 0 1 1.464-3.536Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm-3.536-.536A5 5 0 0 1 6 1h12a5 5 0 0 1 5 5v12a5 5 0 0 1-5 5H6a5 5 0 0 1-5-5V6a5 5 0 0 1 1.464-3.536Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM5 8.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm11 2.466a3 3 0 0 1 2.217.973l4.032 4.397.036.04c.13.14.32.347.457.59.182.32.258.656.258 1.034v.133A4.867 4.867 0 0 1 18.133 23H6a1 1 0 0 1-.74-1.673l8.526-9.379A3.003 3.003 0 0 1 16 10.966Zm-.734 2.328L8.26 21h9.873A2.867 2.867 0 0 0 21 18.133V18a.502.502 0 0 0-.003-.056.786.786 0 0 0-.045-.058 5.736 5.736 0 0 0-.159-.178l-.021-.024-4.03-4.393a1.002 1.002 0 0 0-1.476.003Z" />
-    </svg>
+    <ph-image-square :size="width" />
 </template>

package/app/components/icon/info.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconInfo',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhInfo } 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="M11 7a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H12a1 1 0 0 1-1-1Zm1 3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1Z" />
-    </svg>
+    <ph-info :size="width" />
 </template>

package/app/components/icon/light-bulb.vue

@@ -1,36 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconLightBulb',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhLightbulb } 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.6413 8.0574c-.2908-3.57905-3.0869-6.52059-6.6324-6.99034-2.2369-.301982-4.47385.38028-6.14034 1.84545C5.19087 4.37769 4.229 6.49157 4.229 8.71729c0 2.71781 1.45399 5.26791 3.79156 6.65481.50331.302.50331.4138.50331.5816v1.0625c0 .4586.38027.8389.83884.8389.45857 0 .83889-.3803.83889-.8389v-1.0625c0-1.0961-.67112-1.633-1.33101-2.0244-1.83427-1.0849-2.97509-3.0758-2.97509-5.21201 0-1.74479.74937-3.4001 2.05796-4.55211 1.33096-1.16319 3.04224-1.6665 4.80934-1.44281 2.729.35791 4.9548 2.70666 5.1896 5.45806.2014 2.42707-1.0289 4.63037-3.1987 5.74887-.4251.2237-1.4093.727-1.4428 2.0356v1.029c0 .4585.3802.8388.8388.8388s.8388-.3803.8388-.8388v-1.0067c0-.1677 0-.2908.5369-.5704 2.7961-1.4428 4.362-4.2725 4.1047-7.38177l.0112.02237ZM14.4516 18.7499H9.45212c-.45856 0-.83884.3803-.83884.8388 0 .4586.38028.8389.83884.8389h4.99948c.4586 0 .8389-.3803.8389-.8389 0-.4585-.3803-.8388-.8389-.8388ZM14.4516 21.3223H9.45212c-.45856 0-.83884.3802-.83884.8388s.38028.8388.83884.8388h4.99948c.4586 0 .8389-.3802.8389-.8388s-.3803-.8388-.8389-.8388Z" />
-    </svg>
+    <ph-lightbulb :size="width" />
 </template>

package/app/components/icon/link-out.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconLinkOut',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowSquareOut } 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 4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5a1 1 0 1 1 2 0v5a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h5a1 1 0 1 1 0 2H5Zm10.076-1.383A1 1 0 0 1 16 2h5a.997.997 0 0 1 1 1v5a1 1 0 0 1-1.707.707L18.5 6.914l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.086 5.5l-1.793-1.793a1 1 0 0 1-.217-1.09ZM19.914 5.5l.086.086v-.172l-.086.086ZM18.586 4l-.086.086L18.414 4h.172Z" />
-    </svg>
+    <ph-arrow-square-out :size="width" />
 </template>

package/app/components/icon/location.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconLocation',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhMapPin } 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="M5.636 3.636A9 9 0 0 1 21 10c0 1.017-.108 1.912-.389 2.76-.283.853-.724 1.608-1.33 2.365a.985.985 0 0 1-.025.03l-6.5 7.5a1 1 0 0 1-1.512 0l-6.5-7.5a1.017 1.017 0 0 1-.024-.03c-.607-.757-1.048-1.512-1.331-2.365C3.108 11.912 3 11.017 3 10a9 9 0 0 1 2.636-6.364Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M5.636 3.636A9 9 0 0 1 21 10c0 1.017-.108 1.912-.389 2.76-.283.853-.724 1.608-1.33 2.365a.985.985 0 0 1-.025.03l-6.5 7.5a1 1 0 0 1-1.512 0l-6.5-7.5a1.017 1.017 0 0 1-.024-.03c-.607-.757-1.048-1.512-1.331-2.365C3.108 11.912 3 11.017 3 10a9 9 0 0 1 2.636-6.364ZM12 3a7 7 0 0 0-7 7c0 .875.093 1.545.287 2.131.192.577.497 1.122.982 1.729L12 20.473l5.731-6.613c.485-.607.79-1.152.981-1.729.195-.586.288-1.256.288-2.131a7 7 0 0 0-7-7Z" />
-    </svg>
+    <ph-map-pin :size="width" />
 </template>

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

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconLockOff',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhLockOpen } 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="M2 12a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M5 11a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1H5Zm-3 1a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M9 3a2 2 0 0 0-2 2v5a1 1 0 1 1-2 0V5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v1a1 1 0 1 1-2 0V5a2 2 0 0 0-2-2H9Z" />
-    </svg>
+    <ph-lock-open :size="width" />
 </template>

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

@@ -1,48 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconLockOn',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhLock } 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="M2 12a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M5 11a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1H5Zm-3 1a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8Z" />
-        <path
-            d="M6.172 3.172A4 4 0 0 1 9 2h6a4 4 0 0 1 4 4v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a4 4 0 0 1 1.172-2.828Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M9 4a2 2 0 0 0-2 2v3h10V6a2 2 0 0 0-2-2H9Zm-2.828-.828A4 4 0 0 1 9 2h6a4 4 0 0 1 4 4v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a4 4 0 0 1 1.172-2.828Z" />
-    </svg>
+    <ph-lock :size="width" />
 </template>