bge-ui 1.0.1

package/src/icons/ColorC3User.vue

@@ -0,0 +1,78 @@
+<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="M14 2.5C11.7909 2.5 10 4.29086 10 6.5V11C10 13.2091 11.7909 15 14 15H18C20.2091 15 22 13.2091 22 11V2.5H14Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M9.5 17C6.18629 17 3.5 19.6863 3.5 23V29.5H28.5V23C28.5 19.6863 25.8137 17 22.5 17H9.5Z"
+      class="bge-fill-icon-gray"
+    />
+    <path d="M20.5 17H11.5L16 27.5L20.5 17Z" class="bge-fill-icon-theme" />
+    <path
+      d="M10 6H18V15H14C11.7909 15 10 13.2091 10 11V6Z"
+      class="bge-fill-gay-dark"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC3User',
+})
+</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/ColorC3UserEvery.vue

@@ -0,0 +1,98 @@
+<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="M15.1 4C13.1118 4 11.5 5.62806 11.5 7.63636V10.3636C11.5 12.3719 13.1118 14 15.1 14H16.9C18.8882 14 20.5 12.3719 20.5 10.3636V4H15.1Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M24.4 10C23.0745 10 22 11.1396 22 12.5455V14.4545C22 15.8604 23.0745 17 24.4 17H25.6C26.9255 17 28 15.8604 28 14.4545V10H24.4Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M6.4 10C5.07452 10 4 11.1396 4 12.5455V14.4545C4 15.8604 5.07452 17 6.4 17H7.6C8.92548 17 10 15.8604 10 14.4545V10H6.4Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M22.6056 18.2658C22.8583 18.7904 23 19.3787 23 20V28H9V20C9 19.3787 9.14166 18.7904 9.39444 18.2658L9.40103 18.2522C9.44158 18.1689 9.48493 18.0872 9.53097 18.0072C9.53235 18.0048 9.53374 18.0024 9.53513 18C10.2267 16.8044 11.5194 16 13 16H19C20.4806 16 21.7733 16.8044 22.4649 18C22.5125 18.0823 22.5572 18.1664 22.599 18.2522L22.6056 18.2658Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M24.658 18C24.8797 18.6273 25 19.3012 25 20V28H30V22C30 19.7909 28.2091 18 26 18H24.658Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M7.342 18C7.12026 18.6273 7 19.3012 7 20V28H2V22C2 19.7909 3.79086 18 6 18H7.342Z"
+      class="bge-fill-icon-gray"
+    />
+    <path d="M19 16H13L16 27L19 16Z" class="bge-fill-icon-theme" />
+    <path
+      d="M9 20C9 19.3787 9.14166 18.7904 9.39444 18.2658L9.40103 18.2522C9.4428 18.1664 9.48754 18.0823 9.53513 18H7.342C7.12026 18.6273 7 19.3012 7 20V28H9V20Z"
+      class="bge-fill-gay-dark"
+    />
+    <path
+      d="M22.6055 18.2658C22.8583 18.7904 23 19.3787 23 20V28H25V20C25 19.3012 24.8797 18.6273 24.658 18H22.4648C22.5124 18.0823 22.5572 18.1664 22.5989 18.2522L22.6055 18.2658Z"
+      class="bge-fill-gay-dark"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorC3UserEvery',
+})
+</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/ColorC3UserFollow.vue

@@ -0,0 +1,83 @@
+<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="M13.3333 3.33333C11.1242 3.33333 9.33333 5.12419 9.33333 7.33333V12C9.33333 14.2091 11.1242 16 13.3333 16H17.3333C19.5425 16 21.3333 14.2091 21.3333 12V3.33333H13.3333Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M12 18.6667C7.58172 18.6667 4 22.2484 4 26.6667V29.3333H26.6667V26.6667C26.6667 22.2484 23.0849 18.6667 18.6667 18.6667H12Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M9.33334 6.66667H18V16H13.3333C11.1242 16 9.33334 14.2091 9.33334 12V6.66667Z"
+      class="bge-fill-gay-dark"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M29.2005 16.8227L19.3558 27.0461L12.8215 20.5118L15.1785 18.1548L19.3109 22.2872L26.7995 14.5106L29.2005 16.8227Z"
+      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: 'ColorC3UserFollow',
+})
+</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/ColorCloseFill.vue

@@ -0,0 +1,74 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px;`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+      fill="#FF4784"
+    />
+    <path
+      d="M12 10.5858L9.17157 7.75735L7.75736 9.17157L10.5858 12L7.75736 14.8284L9.17157 16.2426L12 13.4142L14.8284 16.2426L16.2426 14.8284L13.4142 12L16.2426 9.17157L14.8284 7.75735L12 10.5858Z"
+      fill="white"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorCloseFill',
+})
+</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/ColorCompletedFill.vue

@@ -0,0 +1,71 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px;`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="12" cy="12" r="10" fill="#00A389" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.5435 9.71726L11.2812 16.3536L6.78937 12.0078L8.18003 10.5704L11.2165 13.5081L16.0889 8.34464L17.5435 9.71726Z"
+      fill="white"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorCompletedFill',
+})
+</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/ColorCookie.vue

@@ -0,0 +1,99 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px;`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_12648_7376)">
+      <path
+        d="M23.5211 11.0268C22.1289 10.5346 21.1868 9.21274 21.1868 7.73617C21.215 7.49706 21.1024 7.30023 20.9196 7.13148C20.7649 7.00487 20.5259 6.94867 20.329 6.97675C19.1477 7.1455 18.0228 6.808 17.165 6.11893C16.3071 5.42987 15.7024 4.38929 15.604 3.17991C15.59 2.96893 15.4634 2.77205 15.2805 2.64554C15.0977 2.53299 14.8728 2.50486 14.6618 2.58924C12.7493 3.2783 10.9493 2.06893 10.2321 0.423656C10.0915 0.114234 9.76803 -0.0545164 9.43057 0.01589C6.73052 0.620579 4.30239 2.31558 2.64306 4.45313C-1.19596 9.38908 -0.802261 16.1813 3.50087 20.4985C8.18374 25.1672 15.7353 25.1672 20.4041 20.4985C22.5697 18.3328 23.9994 15.2456 23.9994 11.955C23.9711 11.4909 23.9571 11.1815 23.5211 11.0268Z"
+        fill="#FFFF38"
+      />
+      <path
+        d="M7.03047 8.53127C7.03047 9.30649 7.6615 9.93752 8.43672 9.93752C9.21195 9.93752 9.84298 9.30649 9.84298 8.53127C9.84298 7.75605 9.21195 7.12502 8.43672 7.12502C7.6615 7.12502 7.03047 7.75605 7.03047 8.53127Z"
+        fill="black"
+      />
+      <path
+        d="M14.7649 14.1563C13.6017 14.1563 12.6555 13.2101 12.6555 12.0469C12.6555 10.8837 13.6017 9.93752 14.7649 9.93752C15.928 9.93752 16.8742 10.8837 16.8742 12.0469C16.8742 13.2101 15.9281 14.1563 14.7649 14.1563Z"
+        fill="black"
+      />
+      <path
+        d="M14.0617 19.7813C13.2865 19.7813 12.6555 19.1503 12.6555 18.375C12.6555 17.5998 13.2865 16.9688 14.0617 16.9688C14.8369 16.9688 15.468 17.5998 15.468 18.375C15.468 19.1503 14.8369 19.7813 14.0617 19.7813Z"
+        fill="black"
+      />
+      <path
+        d="M9.06959 14.6484C8.71802 14.3391 8.23985 14.1563 7.73365 14.1563C6.56641 14.1563 5.62427 15.0984 5.62427 16.2657C5.62427 16.8141 5.83525 17.3063 6.17271 17.6719C6.55235 18.1079 7.11485 18.375 7.73365 18.375C8.90088 18.375 9.84303 17.4328 9.84303 16.2657C9.84298 15.6047 9.54767 15.0282 9.06959 14.6484Z"
+        fill="black"
+      />
+      <path
+        d="M18.2456 14.9124C18.2456 15.0047 18.2638 15.0961 18.2991 15.1814C18.3344 15.2668 18.3862 15.3443 18.4515 15.4096C18.5168 15.4748 18.5943 15.5266 18.6796 15.562C18.7649 15.5973 18.8564 15.6155 18.9487 15.6155C19.041 15.6155 19.1325 15.5973 19.2178 15.562C19.3031 15.5266 19.3806 15.4748 19.4459 15.4096C19.5112 15.3443 19.563 15.2668 19.5983 15.1814C19.6336 15.0961 19.6518 15.0047 19.6518 14.9124C19.6518 14.82 19.6336 14.7286 19.5983 14.6433C19.563 14.558 19.5112 14.4805 19.4459 14.4152C19.3806 14.3499 19.3031 14.2981 19.2178 14.2628C19.1325 14.2274 19.041 14.2092 18.9487 14.2092C18.8564 14.2092 18.7649 14.2274 18.6796 14.2628C18.5943 14.2981 18.5168 14.3499 18.4515 14.4152C18.3862 14.4805 18.3344 14.558 18.2991 14.6433C18.2638 14.7286 18.2456 14.82 18.2456 14.9124Z"
+        fill="black"
+      />
+      <path
+        d="M4.23606 12.369C4.20073 12.2837 4.18255 12.1922 4.18257 12.0999C4.18255 12.0075 4.20073 11.9161 4.23606 11.8307C4.27138 11.7454 4.32317 11.6679 4.38847 11.6026C4.45376 11.5373 4.53128 11.4855 4.61659 11.4501C4.70191 11.4148 4.79335 11.3966 4.8857 11.3966C4.97804 11.3966 5.06949 11.4148 5.1548 11.4501C5.24012 11.4855 5.31764 11.5373 5.38293 11.6026C5.44822 11.6679 5.50001 11.7454 5.53534 11.8307C5.57067 11.9161 5.58884 12.0075 5.58882 12.0999C5.58884 12.1922 5.57067 12.2837 5.53534 12.369C5.50001 12.4543 5.44822 12.5318 5.38293 12.5971C5.31764 12.6624 5.24012 12.7142 5.1548 12.7496C5.06949 12.7849 4.97804 12.8031 4.8857 12.8031C4.79335 12.8031 4.70191 12.7849 4.61659 12.7496C4.53128 12.7142 4.45376 12.6624 4.38847 12.5971C4.32317 12.5318 4.27138 12.4543 4.23606 12.369Z"
+        fill="black"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_12648_7376">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorCookie',
+})
+</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/ColorStar.vue

@@ -0,0 +1,72 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px;`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 1.33514e-05L14.6942 8.29181H23.4127L16.3593 13.4164L19.0534 21.7082L12 16.5836L4.94658 21.7082L7.64074 13.4164L0.587322 8.29181H9.30583L12 1.33514e-05Z"
+      fill="#2DE37C"
+    />
+    <path
+      d="M19.0534 21.7082L16.3593 13.4164L12 16.5836L19.0534 21.7082Z"
+      fill="#279E5B"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorStar',
+})
+</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/ColorSuccessFill.vue

@@ -0,0 +1,78 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px;`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_12563_8607)">
+      <rect width="24" height="24" fill="#798DA3" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.5288 8.91107L11.1746 17.047L10.4319 16.3569C9.07309 15.0944 6.32315 12.5574 5.86764 12.1954L7.11187 10.6295C7.5597 10.9854 9.62171 12.8806 11.0499 14.2024L17.0451 7.56993L18.5288 8.91107Z"
+        fill="#191F24"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_12563_8607">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'ColorSuccessFill',
+})
+</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>