bge-ui 1.0.1

package/src/icons/ColorC2Google.vue

@@ -0,0 +1,70 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="16" cy="16" r="14" class="bge-fill-icon-gray" />
+    <path
+      d="M13.549 8.75482L16 13L18.4509 8.75483L21.049 10.2548L18.598 14.5H23.4999V17.5H18.5981L21.049 21.7452L18.4509 23.2452L16 19L13.549 23.2452L10.9509 21.7452L13.4019 17.5H8.49994V14.5H13.4019L10.9509 10.2548L13.549 8.75482Z"
+      class="bge-fill-icon-theme"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2Google',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/ColorC2Home.vue

@@ -0,0 +1,70 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4 11.3333L16 2L28 11.3333V28H18V16H14V28H4V11.3333Z"
+      class="bge-fill-icon-gray"
+    />
+    <path d="M14 16H18V28H14V16Z" class="bge-fill-icon-theme" />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2Home',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/ColorC2Kyc.vue

@@ -0,0 +1,73 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="4" y="4" width="24" height="24" class="bge-fill-icon-gray" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15.3 8.5C12.8717 8.5 11 10.5286 11 12.9091V14.0909C11 16.4714 12.8717 18.5 15.3 18.5H16.7C19.1283 18.5 21 16.4714 21 14.0909V8.5H15.3ZM14 12.9091C14 12.0763 14.6355 11.5 15.3 11.5H18V14.0909C18 14.9237 17.3645 15.5 16.7 15.5H15.3C14.6355 15.5 14 14.9237 14 14.0909V12.9091Z"
+      class="bge-fill-icon-theme"
+    />
+    <path d="M10 23.5H22V20.5H10V23.5Z" class="bge-fill-icon-theme" />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2Kyc',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/ColorC2Language.vue

@@ -0,0 +1,70 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="4" y="4" width="24" height="24" class="bge-fill-icon-gray" />
+    <path
+      d="M9 9V12H14.5L14.5 23H17.5V12H21L23 9H9Z"
+      class="bge-fill-icon-theme"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2Language',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/ColorC2Level.vue

@@ -0,0 +1,72 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8 4H24L31 14.5L16 30L1 14.5L8 4Z" class="bge-fill-icon-gray" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.43933 13.5607L10.5607 11.4393L16 16.8787L21.4393 11.4393L23.5607 13.5607L16 21.1213L8.43933 13.5607Z"
+      class="bge-fill-icon-theme"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2Level',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/ColorC2Notification.vue

@@ -0,0 +1,75 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.5 13.5C5.5 7.70101 10.201 3 16 3C21.799 3 26.5 7.70101 26.5 13.5V21.5H28.5V26.5H21.7678C20.6838 28.5799 18.5077 30 16 30C13.4923 30 11.3162 28.5799 10.2322 26.5H3.5V21.5H5.5V13.5Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.9495 10.0905C12.0382 8.49931 13.7489 7.5 16 7.5V10.5C14.7511 10.5 13.9618 11.0007 13.4255 11.7845C12.8406 12.6393 12.5 13.9327 12.5 15.5H9.5C9.5 13.5673 9.9094 11.6107 10.9495 10.0905Z"
+      class="bge-fill-icon-theme"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2Notification',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/ColorC2Pdf.vue

@@ -0,0 +1,73 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 3.5H21L27 11.5V28.5H5.00001L5 3.5Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M21.0855 19.9523C20.0329 19.8743 19.0193 19.4845 18.2006 18.7828C16.6022 19.1336 15.0817 19.6404 13.5613 20.2642C12.3528 22.4084 11.2222 23.5 10.2475 23.5C10.0526 23.5 9.8187 23.461 9.66275 23.3441C9.23391 23.1491 9 22.7203 9 22.2914C9 21.9406 9.07797 20.9659 12.7816 19.3675C13.6393 17.8081 14.302 16.2097 14.8478 14.5333C14.38 13.5977 13.3664 11.2975 14.0681 10.128C14.302 9.69913 14.7699 9.46522 15.2767 9.50421C15.6665 9.50421 16.0564 9.69913 16.2903 10.011C16.7971 10.7128 16.7581 12.1942 16.0954 14.3774C16.7191 15.547 17.5378 16.5996 18.5125 17.4962C19.3312 17.3403 20.1499 17.2233 20.9685 17.2233C22.8009 17.2623 23.0738 18.12 23.0348 18.6268C23.0348 19.9523 21.7483 19.9523 21.0855 19.9523ZM10.1696 22.3694L10.2865 22.3304C10.8323 22.1355 11.2612 21.7457 11.573 21.2388C10.9883 21.4728 10.5204 21.8626 10.1696 22.3694ZM15.3546 10.6738H15.2377C15.1987 10.6738 15.1207 10.6738 15.0817 10.7128C14.9258 11.3755 15.0428 12.0772 15.3156 12.701C15.5496 12.0383 15.5496 11.3365 15.3546 10.6738ZM15.6275 16.3267L15.5885 16.4046L15.5496 16.3657C15.1987 17.2623 14.8088 18.159 14.38 19.0167L14.458 18.9777V19.0557C15.3157 18.7438 16.2513 18.4709 17.109 18.2759L17.07 18.237H17.187C16.6022 17.6522 16.0564 16.9894 15.6275 16.3267ZM20.9296 18.3929C20.5787 18.3929 20.2668 18.3929 19.9159 18.4709C20.3058 18.6658 20.6956 18.7438 21.0855 18.7828C21.3584 18.8217 21.6313 18.7828 21.8652 18.7048C21.8652 18.5878 21.7093 18.3929 20.9296 18.3929Z"
+      class="bge-fill-icon-theme"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2Pdf',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/ColorC2Phone.vue

@@ -0,0 +1,67 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M27 2L27 30H5L5 2L27 2Z" class="bge-fill-icon-gray" />
+    <path d="M11 22H21V25H11V22Z" class="bge-fill-icon-theme" />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2Phone',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/ColorC2Register.vue

@@ -0,0 +1,68 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M4 4H28V28H4V4Z" class="bge-fill-icon-gray" />
+    <path d="M16 9L23 9V23H16V20H20V12H16V9Z" class="bge-fill-icon-theme" />
+    <path d="M9 11.5L16 18.5H4V15.5H9V11.5Z" class="bge-fill-icon-theme" />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2Register',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>

package/src/icons/ColorC2RightDown.vue

@@ -0,0 +1,72 @@
+<template>
+  <svg
+    class="bge-color-svg"
+    :style="`width: 1em; height: 1em;font-size: ${size}px;`"
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="16" cy="16" r="14" class="bge-fill-icon-gray" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21 12.4646V21H12.4646V18.0125H15.9L10 12.1125L12.1125 10L18.0125 15.9V12.4646L21 12.4646Z"
+      class="bge-fill-icon-theme"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC2RightDown',
+})
+</script>
+<style lang="scss">
+.bge-color-svg {
+  --icon-theme: #fff833;
+  --icon-gray: #9baec2;
+  --icon-gay-dark: #526375;
+
+  .dark & {
+    --icon-theme: #ffff38;
+    --icon-gray: #708397;
+    --icon-gay-dark: #32404d;
+  }
+}
+
+.bge-fill-icon-theme {
+  fill: var(--icon-theme);
+}
+
+.bge-fill-icon-gray {
+  fill: var(--icon-gray);
+}
+
+.bge-fill-gay-dark {
+  fill: var(--icon-gay-dark);
+}
+
+.bge-stroke-icon-theme {
+  stroke: var(--icon-theme);
+}
+
+.bge-stroke-icon-gray {
+  stroke: var(--icon-gray);
+}
+
+.bge-stroke-gay-dark {
+  stroke: var(--icon-gay-dark);
+}
+</style>