bge-ui 1.0.1

package/src/icons/MonoGoogleplay.vue

@@ -0,0 +1,82 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 2.21993V21.7964L13.0626 12.0082L3 2.21993Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.1382 10.9619L4.01414 1.11382L16.4958 8.66853L14.1382 10.9619Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.1382 13.0545L4.05855 22.8593L16.4855 15.3377L14.1382 13.0545Z"
+      fill="currentColor"
+    />
+    <path
+      d="M17.8116 14.5351L15.2138 12.0082L17.8219 9.47118L22 12L17.8116 14.5351Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoGoogleplay',
+})
+</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/MonoHelp.vue

@@ -0,0 +1,77 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16 10C16 7.79 14.21 6 12 6C9.54757 6 8.42562 7.5491 7.86719 9.91797L9.68359 10.4922C10.0579 9.1436 10.5517 8 12 8C13.1 8 14 8.9 14 10C14 10.8792 13.4203 11.3236 12.7705 11.8217C11.9421 12.4566 11 13.1787 11 15H13C13 13.9046 13.711 13.2833 14.4408 12.6455C15.21 11.9733 16 11.2829 16 10Z"
+      fill="currentColor"
+    />
+    <path d="M13 17.7307V15.7307H11V17.7307H13Z" fill="currentColor" />
+    <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 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoHelp',
+})
+</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/MonoInternational.vue

@@ -0,0 +1,70 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM13.6826 15.9496C12.5869 16.016 11.4131 16.016 10.3174 15.9496C10.4526 16.7361 10.6259 17.4435 10.8274 18.0478C11.0794 18.8039 11.3575 19.3437 11.6177 19.6739C11.7052 19.7849 11.8398 20 12.0019 20C12.1468 19.987 12.3044 19.7728 12.3823 19.6739C12.6425 19.3437 12.9206 18.8039 13.1726 18.0478C13.3741 17.4435 13.5474 16.7361 13.6826 15.9496ZM19.513 14.7548C19.2483 14.8687 18.9695 14.9736 18.6803 15.07C17.8278 15.3542 16.8324 15.5816 15.7405 15.7405C15.5816 16.8324 15.3542 17.8278 15.07 18.6803C14.9736 18.9695 14.8687 19.2483 14.7548 19.513C16.957 18.7053 18.7053 16.957 19.513 14.7548ZM4.48693 14.7547C5.29463 16.957 7.04296 18.7053 9.24517 19.513C9.13131 19.2483 9.02639 18.9695 8.93 18.6803C8.64583 17.8278 8.41836 16.8324 8.25952 15.7405C7.16765 15.5816 6.17233 15.3541 5.3199 15.07C5.03063 14.9736 4.75171 14.8686 4.48693 14.7547ZM10.0718 10.0718C9.97457 11.3542 9.97456 12.6458 10.0718 13.9282C11.3542 14.0254 12.6458 14.0254 13.9282 13.9282C14.0254 12.6458 14.0254 11.3542 13.9282 10.0718C12.6458 9.97456 11.3542 9.97456 10.0718 10.0718ZM15.9496 10.3174C16.016 11.4131 16.016 12.5869 15.9496 13.6826C16.7361 13.5474 17.4435 13.3741 18.0478 13.1726C18.8039 12.9206 19.3437 12.6425 19.6739 12.3823C19.784 12.2955 20 12.1585 20 11.9981C19.9869 11.8532 19.7728 11.6956 19.6739 11.6177C19.3437 11.3575 18.8039 11.0794 18.0478 10.8274C17.4435 10.6259 16.7361 10.4526 15.9496 10.3174ZM8.05044 10.3175C7.26396 10.4527 6.55663 10.6259 5.95236 10.8274C5.19625 11.0794 4.65651 11.3575 4.32633 11.6177C4.08682 11.8064 4.01366 11.9502 4.00315 11.9847C3.95762 12.1341 4.23255 12.3084 4.32633 12.3823C4.65651 12.6425 5.19625 12.9206 5.95236 13.1726C6.55663 13.3741 7.26396 13.5473 8.05044 13.6825C7.98396 12.5869 7.98397 11.4131 8.05044 10.3175ZM9.24526 4.48693C7.04301 5.29465 5.29465 7.04301 4.48693 9.24526C4.75171 9.13137 5.03063 9.02642 5.3199 8.93C6.17233 8.64585 7.16767 8.41838 8.25955 8.25955C8.41839 7.16767 8.64585 6.17234 8.93 5.3199C9.02642 5.03063 9.13137 4.75171 9.24526 4.48693ZM14.7547 4.48693C14.8686 4.75171 14.9736 5.03063 15.07 5.3199C15.3541 6.17233 15.5816 7.16765 15.7404 8.25952C16.8324 8.41836 17.8278 8.64584 18.6803 8.93C18.9695 9.0264 19.2483 9.13131 19.513 9.24517C18.7053 7.04296 16.957 5.29463 14.7547 4.48693ZM12 4.00009C11.8612 3.99965 11.6884 4.23658 11.6177 4.32633C11.3575 4.65651 11.0794 5.19625 10.8274 5.95236C10.6259 6.55663 10.4527 7.26396 10.3175 8.05044C11.4131 7.98397 12.5869 7.98396 13.6825 8.05044C13.5473 7.26396 13.3741 6.55663 13.1726 5.95236C12.9206 5.19625 12.6425 4.65651 12.3823 4.32633C12.3116 4.23658 12.1388 3.99965 12 4.00009Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoInternational',
+})
+</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/MonoLess.vue

@@ -0,0 +1,67 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="3" y="11" width="18" height="2" fill="currentColor" />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoLess',
+})
+</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/MonoLogout.vue

@@ -0,0 +1,71 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M13 2H11V14H13V2Z" fill="currentColor" />
+    <path
+      d="M4 12C4 8.86038 5.80844 6.14131 8.44503 4.83103L7.55497 3.04C4.26468 4.67514 2 8.07218 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 8.07218 19.7353 4.67514 16.445 3.04L15.555 4.83103C18.1916 6.14131 20 8.86038 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoLogout',
+})
+</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/MonoMenu.vue

@@ -0,0 +1,69 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2 4H22V6H2V4Z" fill="currentColor" />
+    <path d="M2 11H22V13H2V11Z" fill="currentColor" />
+    <path d="M22 18H2V20H22V18Z" fill="currentColor" />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoMenu',
+})
+</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/MonoMoon.vue

@@ -0,0 +1,72 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    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="M14.5757 4.42346C14.8508 5.23243 15 6.09928 15 7C15 11.4183 11.4183 15 7 15C6.09928 15 5.23243 14.8508 4.42346 14.5757C5.49544 17.7301 8.48312 20 12 20C16.4183 20 20 16.4183 20 12C20 8.48312 17.7301 5.49544 14.5757 4.42346ZM12.045 3.75067C11.5657 3.00829 12.1241 1.95434 13.0863 2.05841C18.0987 2.6005 22 6.84397 22 12C22 17.5228 17.5228 22 12 22C6.84397 22 2.6005 18.0987 2.05841 13.0863C1.95434 12.1241 3.0083 11.5657 3.75067 12.045C4.68655 12.6492 5.80078 13 7 13C10.3137 13 13 10.3137 13 7C13 5.80078 12.6492 4.68655 12.045 3.75067Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoMoon',
+})
+</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/MonoMore.vue

@@ -0,0 +1,69 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M4 10.5H7V13.5H4V10.5Z" fill="currentColor" />
+    <path d="M17 10.5H20V13.5H17V10.5Z" fill="currentColor" />
+    <path d="M10.5 10.5H13.5V13.5H10.5V10.5Z" fill="currentColor" />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoMore',
+})
+</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/MonoNotification.vue

@@ -0,0 +1,72 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    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="M8.01197 19H2V17H4.5V9.58824C4.5 5.39907 7.96661 2 12 2C16.0334 2 19.5 5.39907 19.5 9.58824V17H22V19H15.988C15.8332 21.1525 14.1932 23 12 23C9.80684 23 8.16675 21.1525 8.01197 19ZM6.5 9.58824C6.5 6.50022 9.07459 4 12 4C14.9254 4 17.5 6.50022 17.5 9.58824V17H6.5V9.58824ZM10.0195 19C10.1631 20.2056 11.0748 21 12 21C12.9252 21 13.8369 20.2056 13.9805 19H10.0195Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoNotification',
+})
+</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>