@energysage/es-ds-components 5.0.2 → 5.2.0

package/app/components/icon/copy.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconCopy',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhCopySimple } 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="M7.879 1.879A3 3 0 0 1 10 1h4.685a3 3 0 0 1 2.097.855l3.315 3.242A3 3 0 0 1 21 7.242V16a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1V4a3 3 0 0 1 .879-2.121Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M7.879 1.879A3 3 0 0 1 10 1h4.685a3 3 0 0 1 2.097.855l3.315 3.242A3 3 0 0 1 21 7.242V16a3 3 0 0 1-3 3h-8a3 3 0 0 1-3-3V4a3 3 0 0 1 .879-2.121ZM10 3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7.242a1.001 1.001 0 0 0-.301-.715l-3.315-3.242A1 1 0 0 0 14.685 3H10Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M6 8a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-2a1 1 0 1 1 2 0v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h2a1 1 0 0 1 0 2H6Z" />
-    </svg>
+    <ph-copy-simple :size="width" />
 </template>

package/app/components/icon/envelope.vue

@@ -1,45 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconEnvelope',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhEnvelope } 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="M1.879 3.879A3 3 0 0 1 4 3h16a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V6a3 3 0 0 1 .879-2.121Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M4 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4ZM1.879 3.879A3 3 0 0 1 4 3h16a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V6a3 3 0 0 1 .879-2.121Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m8.876 14.782-7.5-6.001 1.249-1.562 7.5 6.001a3 3 0 0 0 3.75 0l7.5-6 1.25 1.56-7.501 6.002a5 5 0 0 1-6.248 0Z" />
-    </svg>
+    <ph-envelope :size="width" />
 </template>

package/app/components/icon/eye.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconEye',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhEye } 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.992 4c4.502 0 8.202 4 10.103 6.4.7 1 .7 2.3 0 3.2-1.9 2.4-5.601 6.4-10.102 6.4C7.49 20 3.79 16.1 1.99 13.6c-.4-.4-.6-1-.6-1.6 0-.6.2-1.2.6-1.7C3.79 8 7.491 4 11.992 4Z"
-            fill="none" />
-        <path
-            d="M22.095 10.4C20.195 8 16.494 4 11.993 4 7.49 4 3.79 8 1.99 10.3c-.4.5-.6 1.1-.6 1.7 0 .6.2 1.2.6 1.6 1.8 2.5 5.501 6.4 10.002 6.4 4.502 0 8.202-4 10.103-6.4.7-.9.7-2.2 0-3.2Zm-1.6 2.1c-1.3 1.6-4.702 5.5-8.503 5.5-3.8 0-7.201-3.9-8.501-5.6-.1-.1-.1-.3-.1-.4 0-.1.1-.3.1-.4C4.79 9.9 8.19 6 11.993 6c3.8 0 7.201 3.9 8.501 5.6.2.3.2.6 0 .9Z" />
-        <path
-            d="M11.992 8c-2.2 0-4 1.8-4 4s1.8 4 4 4c2.201 0 4.001-1.8 4.001-4s-1.8-4-4-4Zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Z" />
-    </svg>
+    <ph-eye :size="width" />
 </template>

package/app/components/icon/flag.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconFlag',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhFlag } 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.6369 8.87295L18.7994 5.19737C19.0191 4.94421 19.0669 4.5879 18.9236 4.27848C18.7803 3.97843 18.4745 3.78153 18.1306 3.78153H5.91083V2.93765C5.91083 2.42194 5.48089 2 4.95541 2C4.42994 2 4 2.42194 4 2.93765V21.0624C4 21.5781 4.42994 22 4.95541 22C5.48089 22 5.91083 21.5781 5.91083 21.0624V13.9644H18.1306C18.4745 13.9644 18.7803 13.7675 18.9236 13.4674C19.0669 13.1674 19.0191 12.8111 18.7994 12.5485L15.6369 8.87295ZM5.91083 12.2391V5.49742H16.2484L13.8217 8.31974C13.5446 8.63854 13.5446 9.10736 13.8217 9.42616L16.2484 12.2485H5.91083V12.2391Z"
-            fill-rule="evenodd" />
-    </svg>
+    <ph-flag :size="width" />
 </template>

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/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>