@energysage/es-ds-components 5.0.2 → 5.2.0

package/app/components/icon/upload.vue

@@ -1,41 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconUpload',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhUploadSimple } 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 48 48"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-            fill="currentColor"
-            d="M1.5 30.734c.398 0 .78.182 1.06.506.282.324.44.763.44 1.22v8.634c0 .916.316 1.794.879 2.441.562.648 1.325 1.012 2.121 1.012h36c.796 0 1.559-.364 2.121-1.012.563-.647.879-1.525.879-2.441V32.46c0-.458.158-.897.44-1.221a1.408 1.408 0 0 1 1.06-.506c.398 0 .78.182 1.06.506.282.324.44.763.44 1.22v8.634c0 1.831-.632 3.588-1.757 4.883C45.117 47.272 43.59 48 42 48H6c-1.591 0-3.117-.728-4.243-2.023C.632 44.682 0 42.925 0 41.094V32.46c0-.458.158-.897.44-1.221a1.408 1.408 0 0 1 1.06-.506Z" />
-        <path
-            fill="currentColor"
-            d="M22.94.507c.14-.16.305-.288.487-.375a1.331 1.331 0 0 1 1.15 0c.182.087.348.214.487.375l9 10.36c.282.324.44.764.44 1.222 0 .459-.158.898-.44 1.223a1.41 1.41 0 0 1-1.062.506 1.41 1.41 0 0 1-1.062-.506l-6.438-7.414V36.26c0 .458-.158.897-.44 1.221a1.408 1.408 0 0 1-1.06.506c-.398 0-.78-.182-1.06-.506a1.867 1.867 0 0 1-.44-1.22V5.897l-6.438 7.414c-.14.16-.305.287-.487.374a1.332 1.332 0 0 1-1.15 0 1.507 1.507 0 0 1-.487-.374c-.14-.161-.25-.352-.326-.561a1.958 1.958 0 0 1 0-1.323c.076-.21.186-.4.326-.561l9-10.36Z" />
-    </svg>
+    <ph-upload-simple :size="width" />
 </template>

package/app/components/icon/verified.vue

@@ -1,40 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconVerified',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhSealCheck } 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,
-        }"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24">
-        <path
-            d="M21.231 11.156v.85a9.231 9.231 0 1 1-5.474-8.438m5.474 1.053-9.23 9.24-2.77-2.77"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-    </svg>
+    <ph-seal-check :size="width" />
 </template>

package/app/components/icon/wifi.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconWifi',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhWifiHigh } 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 6c-3.161 0-6.406 1.5-9.257 4.669A1 1 0 1 1 1.257 9.33C4.406 5.831 8.16 4 12 4c3.839 0 7.594 1.832 10.743 5.331a1 1 0 1 1-1.486 1.338C18.406 7.5 15.16 5.999 12 5.999Zm0 6c-1.761 0-3.606.835-5.257 2.669a1 1 0 1 1-1.486-1.338C7.206 11.165 9.56 10 12 10s4.794 1.165 6.743 3.331a1 1 0 1 1-1.486 1.338C15.606 12.835 13.76 12 12 12Zm-2 6a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z" />
-    </svg>
+    <ph-wifi-high :size="width" />
 </template>

package/app/components/icon/x.vue

@@ -1,38 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'XIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhX } 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.293 5.293a1 1 0 0 1 1.414 0L12 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-x :size="width" />
 </template>

package/nuxt.config.ts

@@ -4,7 +4,7 @@ export default defineNuxtConfig({
 
     // prevents "Cannot read properties of null (reading 'ce')" in SSR/SSG with reka-ui
     build: {
-        transpile: ['reka-ui'],
+        transpile: ['@phosphor-icons', 'reka-ui'],
     },
 
     // https://nuxt.com/docs/getting-started/styling#the-css-property

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "5.0.2",
+    "version": "5.2.0",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -19,6 +19,7 @@
     "dependencies": {
         "@energysage/es-ds-styles": "^3.3.4",
         "@nuxtjs/google-fonts": "^3.2.0",
+        "@phosphor-icons/vue": "^2.2.1",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^13.9.0",

package/app/components/icon/arrow.vue

@@ -1,68 +0,0 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconArrow',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        orientation: {
-            type: String,
-            default: 'top',
-            required: false,
-        },
-    },
-    computed: {
-        classFromOrientation() {
-            return `orientation-${this.orientation}`;
-        },
-    },
-};
-</script>
-<template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        :class="classFromOrientation"
-        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 1v13.586l5.293-5.293a1 1 0 0 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 1 1 1.414-1.414L11 17.586V4a1 1 0 0 1 1-1Z" />
-    </svg>
-</template>
-
-<style lang="scss" scoped>
-.orientation-down {
-    transform: rotate(0deg);
-}
-
-.orientation-left {
-    transform: rotate(90deg);
-}
-
-.orientation-top {
-    transform: rotate(180deg);
-}
-
-.orientation-right {
-    transform: rotate(270deg);
-}
-</style>