@energysage/es-ds-components 0.0.1 → 3.0.0-alpha.10

package/components/icon/circle-check.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconCircleCheck',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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="M16.64 8.732a1 1 0 0 1 .128 1.408l-5 6a1 1 0 0 1-1.475.067l-3-3a1 1 0 1 1 1.414-1.414l2.226 2.226 4.299-5.16a1 1 0 0 1 1.408-.127Z" />
+        <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" />
+    </svg>
+</template>

package/components/icon/circle-chevron-down.vue

@@ -0,0 +1,47 @@
+<!-- eslint-disable max-len -->
+
+<script lang="ts">
+export default {
+    name: 'IconCircleChevronDown',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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="M7.293 9.793a1 1 0 0 1 1.414 0L12 13.086l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z" />
+    </svg>
+</template>

package/components/icon/circle-chevron-left.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconCircleChevronLeft',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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="M14.207 7.293a1 1 0 0 1 0 1.414L10.914 12l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0Z" />
+    </svg>
+</template>

package/components/icon/circle-chevron-right.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconCircleChevronRight',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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="M9.793 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L13.086 12 9.793 8.707a1 1 0 0 1 0-1.414Z" />
+    </svg>
+</template>

package/components/icon/circle-chevron-up.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconCircleChevronUp',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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.293 8.793a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 10.914l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4Z" />
+    </svg>
+</template>

package/components/icon/circle-minus.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconCircleMinus',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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="M7 12a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z" />
+        <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" />
+    </svg>
+</template>

package/components/icon/circle-plus.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconCirclePlus',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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 7a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1Z" />
+        <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" />
+    </svg>
+</template>

package/components/icon/circle-x.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconCircleX',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" />
+        <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" />
+    </svg>
+</template>

package/components/icon/circle.vue

@@ -0,0 +1,42 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconCircle',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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" />
+    </svg>
+</template>

package/components/icon/clock.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable max-len -->
+<script lang="ts">
+export default {
+    name: 'IconClock',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</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 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Z"
+            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="M12 5a1 1 0 0 1 1 1v6.172a1 1 0 0 0 .293.707l2.414 2.414a1 1 0 0 1-1.414 1.414l-2.414-2.414a3 3 0 0 1-.879-2.12V6a1 1 0 0 1 1-1Z" />
+    </svg>
+</template>

package/components/icon/community-solar.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+export default {
+    name: 'IconCommunitySolar',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+    },
+};
+</script>
+
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        viewBox="0 0 32 32"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M31.99 6.07a.96.96 0 0 0-.154-.68.936.936 0 0 0-.788-.39H7.871c-.532 0-1.077.37-1.305.881L4.56 10.45 2.24 15.73.107 20.595c-.155.35-.142.713.04.99a.922.922 0 0 0 .787.403h5.228v4.265a.571.571 0 1 0 1.144 0v-4.265h13.018v4.265a.571.571 0 1 0 1.144 0v-4.265h3.673c.62 0 1.252-.471 1.48-1.09l1.723-4.736 1.917-5.282.592-1.621v16.994a.571.571 0 1 0 1.144 0V6.117s-.007-.034-.007-.047Zm-7.67 1.056-1.143 2.987h-4.925l1.594-3.97h4.851l-.377.983Zm-5.247 13.725h-5.127l1.73-4.313h5.045l-.787 2.06-.861 2.253ZM17.02 10.12h-4.912l1.669-3.97h4.837l-1.594 3.97Zm-5.396 1.144h4.938L14.901 15.4H9.89l1.736-4.137Zm9.533 4.137h-5.025l1.661-4.137h4.945l-.881 2.314-.7 1.823ZM7.615 6.346c.047-.108.202-.202.256-.202h4.662l-1.668 3.97H5.96l1.655-3.768Zm-2.16 4.91h4.932l-1.736 4.139H3.64l1.816-4.138Zm-2.32 5.282H8.16l-1.783 4.246-.027.06H1.244l1.89-4.312v.006Zm6.243.06.027-.06h5.039l-1.73 4.313h-5.12l1.784-4.245v-.007Zm16.174 3.91c-.068.195-.296.336-.404.336h-4.85l.786-2.059.861-2.253h5.053l-1.446 3.97v.006Zm1.863-5.113h-5.032l.881-2.315.7-1.823h4.952l-1.507 4.138h.006Zm1.918-5.282H24.4l.377-.982 1.144-2.987h4.857l-1.446 3.97Z" />
+    </svg>
+</template>

package/components/icon/companies.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+export default {
+    name: 'IconCompanies',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+    },
+};
+</script>
+
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        viewBox="0 0 36 36"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M24.844 22.3059H24.3289C23.9941 20.9495 22.6291 17.1135 17.9611 17.1135C17.8967 17.1135 16.4287 17.0504 14.8835 17.8832C13.7438 18.4952 12.2951 19.7571 11.6835 22.3059H11.1684C10.8658 22.3059 10.6211 22.5457 10.6211 22.8422V23.94C10.6211 24.2365 10.8658 24.4763 11.1684 24.4763H12.0762C12.0505 24.6845 12.0376 24.8927 12.0376 25.1009C12.0376 28.3564 14.7418 31 18.0642 31C21.3865 31 24.0907 28.3501 24.0907 25.1009C24.0907 24.899 24.0778 24.6908 24.0521 24.4763H24.8505C25.1531 24.4763 25.3978 24.2365 25.3978 23.94V22.8422C25.3978 22.5457 25.1531 22.3059 24.8505 22.3059H24.844ZM22.9897 25.1009C22.9897 27.7634 20.7748 29.9337 18.0577 29.9337C15.3406 29.9337 13.1257 27.7697 13.1257 25.1009C13.1257 24.8927 13.145 24.6908 13.1772 24.4763H22.9446C22.9704 24.6845 22.9897 24.8927 22.9897 25.1009V25.1009ZM11.7092 23.41L12.1213 23.3848C12.3853 23.3848 12.6106 23.2018 12.6621 22.9495C13.0356 20.9936 13.9563 19.6056 15.405 18.8296C16.667 18.1545 17.8967 18.1924 17.9354 18.1924C22.6356 18.1924 23.3116 22.7287 23.3374 22.9179C23.376 23.1829 23.6078 23.3848 23.8782 23.3848H24.2967L11.7092 23.41V23.41Z" />
+        <path
+            d="M8.86369 17.0379L11.0786 15.4606C11.2717 15.3218 11.349 15.0821 11.2782 14.8612C11.2074 14.6404 10.9949 14.489 10.7566 14.489H8.02023L7.17033 11.9401C7.0995 11.7193 6.88703 11.5679 6.6488 11.5679C6.41057 11.5679 6.20453 11.7193 6.12727 11.9338L5.27737 14.4827H2.54739C2.30916 14.4827 2.10313 14.6341 2.02586 14.8549C1.95504 15.0758 2.0323 15.3155 2.22546 15.4543L4.43391 17.0316L3.58401 19.5994C3.51319 19.8202 3.59045 20.06 3.78361 20.1988C3.88019 20.2682 3.98965 20.2997 4.10554 20.2997C4.22144 20.2997 4.33089 20.2682 4.42747 20.1988L6.65524 18.6152L8.87657 20.1988C9.06973 20.3376 9.32727 20.3376 9.52043 20.1988C9.71359 20.06 9.79085 19.8202 9.72003 19.5994L8.87013 17.0379H8.86369ZM7.07375 17.5931C6.82264 17.4165 6.48783 17.4101 6.23673 17.5931L5.1486 18.3691L5.56711 17.1136C5.66369 16.8297 5.56067 16.5142 5.30956 16.3313L4.23431 15.5616H5.56067C5.86973 15.5616 6.14015 15.3723 6.23673 15.0821L6.65524 13.8329L7.06731 15.0821C7.16389 15.3723 7.43431 15.5616 7.74337 15.5616H9.06973L7.99447 16.3313C7.74337 16.5079 7.64035 16.8234 7.73693 17.1136L8.15544 18.3628L7.07375 17.5931V17.5931Z" />
+        <path
+            d="M33.9745 14.8612C33.9036 14.6404 33.6912 14.489 33.4529 14.489H30.7165L29.8666 11.9401C29.7958 11.7193 29.5833 11.5679 29.3451 11.5679C29.1069 11.5679 28.9008 11.7193 28.8236 11.9338L27.9737 14.4827H25.2437C25.0055 14.4827 24.7994 14.6341 24.7222 14.8549C24.6513 15.0758 24.7286 15.3155 24.9217 15.4543L27.1302 17.0316L26.2803 19.5994C26.2095 19.8202 26.2867 20.06 26.4799 20.1988C26.5765 20.2682 26.6859 20.2997 26.8018 20.2997C26.9177 20.2997 27.0272 20.2682 27.1238 20.1988L29.3515 18.6152L31.5729 20.1988C31.766 20.3376 32.0236 20.3376 32.2167 20.1988C32.4099 20.06 32.4871 19.8202 32.4163 19.5994L31.5664 17.0379L33.7813 15.4606C33.9745 15.3218 34.0517 15.0821 33.9809 14.8612H33.9745ZM30.6908 16.3313C30.4397 16.5079 30.3366 16.8234 30.4332 17.1136L30.8517 18.3628L29.77 17.5931C29.5189 17.4165 29.1841 17.4101 28.933 17.5931L27.8449 18.3691L28.2634 17.1136C28.36 16.8234 28.257 16.5142 28.0059 16.3313L26.9306 15.5616H28.257C28.566 15.5616 28.8364 15.3723 28.933 15.0821L29.3515 13.8329L29.7636 15.0758C29.8602 15.366 30.1306 15.5553 30.4397 15.5553H31.766L30.6908 16.325V16.3313Z" />
+        <path
+            d="M15.4502 11.4732L14.3942 14.6593C14.3234 14.8801 14.4007 15.1199 14.5938 15.2587C14.6904 15.3281 14.7999 15.3596 14.9158 15.3596C15.0316 15.3596 15.1411 15.3281 15.2377 15.2587L18.0063 13.2902L20.7685 15.2587C20.9616 15.3975 21.2192 15.3975 21.4123 15.2587C21.6055 15.1199 21.6828 14.8801 21.6119 14.6593L20.5496 11.4732L23.3053 9.51104C23.4985 9.37224 23.5757 9.13249 23.5049 8.91167C23.4341 8.69085 23.2216 8.53943 22.9834 8.53943H19.5838L18.5278 5.37224C18.457 5.15142 18.2445 5 18.0063 5C17.7681 5 17.562 5.15142 17.4848 5.36593L16.4288 8.53943H13.0357C12.7974 8.53943 12.5914 8.69085 12.5141 8.91167C12.4433 9.13249 12.5206 9.37224 12.7137 9.51104L15.463 11.4732H15.4502ZM16.6735 9.61199C16.9954 9.61199 17.2787 9.41009 17.3817 9.10726L17.9999 7.26498L18.6115 9.10726C18.7145 9.41009 18.9978 9.61199 19.3198 9.61199H21.29L19.6932 10.7476C19.4357 10.9369 19.3262 11.265 19.4228 11.5678L20.0409 13.4164L18.4441 12.2744C18.1801 12.0852 17.826 12.0852 17.5685 12.2744L15.9588 13.4164L16.5769 11.5615C16.6799 11.2587 16.5705 10.9306 16.3065 10.7413L14.7162 9.60568H16.6799L16.6735 9.61199Z" />
+    </svg>
+</template>

package/components/icon/contact-us.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+export default {
+    name: 'IconContactUs',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+    },
+};
+</script>
+
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        viewBox="0 0 32 32"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M29.5901 7.05046C29.5004 7.00561 29.3995 6.99439 29.3042 7.01121C29.2874 7.01121 29.265 7 29.2481 7H2.61673C2.61673 7 2.57748 7.00561 2.55505 7.01121C2.45974 7 2.36443 7.00561 2.26912 7.05046C2.10092 7.12895 2 7.29715 2 7.48217V24.1562C2 24.4197 2.21305 24.6328 2.47656 24.6328H29.3883C29.5173 24.6328 29.635 24.5879 29.7247 24.4926C29.8144 24.4029 29.8649 24.2796 29.8649 24.1562V7.48217C29.8649 7.29715 29.7583 7.12895 29.5901 7.05046V7.05046ZM27.9138 7.95873L15.9324 17.7535L3.9511 7.95873H27.9138V7.95873ZM28.9117 23.6797H2.95312V8.48575L15.6297 18.8187C15.8035 18.9589 16.0558 18.9589 16.2296 18.8187L28.9117 8.48575V23.6797Z" />
+    </svg>
+</template>

package/components/icon/copy.vue

@@ -0,0 +1,45 @@
+<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>
+<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>
+</template>

package/components/icon/credit-card.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+export default {
+    name: 'IconCreditCard',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 50 32"
+        fill="currentColor">
+        <path
+            d="M44.9 0h-40A4.9 4.9 0 0 0 0 4.8v22a5 5 0 0 0 4.8 5h40a5 5 0 0 0 4.9-5v-22c0-2.6-2.2-4.8-4.9-4.8Zm-40 1.7h40c1.7 0 3.1 1.4 3.1 3.1v3.8H1.7V4.8c0-1.7 1.4-3.1 3.1-3.1Zm40 28.3h-40a3.1 3.1 0 0 1-3.2-3V10.3H48V27c0 1.7-1.4 3.1-3.1 3.1ZM16 20.8c0 .4-.4.8-.9.8H6a.8.8 0 1 1 0-1.7h9.3c.5 0 .9.4.9.9Z"
+            fill-rule="evenodd" />
+    </svg>
+</template>