bge-ui 1.0.21 → 1.0.23

package/src/icons/MonoChevronlinDown.vue

@@ -0,0 +1,48 @@
+<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="M11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071L18 14.4142C18.3905 14.0237 18.3905 13.3905 18 13C17.6095 12.6095 16.9763 12.6095 16.5858 13L13 16.5858V5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5V16.5858L7.4142 13C7.02368 12.6095 6.39051 12.6095 5.99999 13C5.60946 13.3905 5.60946 14.0237 5.99999 14.4142L11.2929 19.7071Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoChevronlinDown',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoChevronlinUp.vue

@@ -0,0 +1,48 @@
+<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="M11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289L18 9.58579C18.3905 9.97631 18.3905 10.6095 18 11C17.6095 11.3905 16.9763 11.3905 16.5858 11L13 7.41421V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V7.41421L7.4142 11C7.02368 11.3905 6.39051 11.3905 5.99999 11C5.60946 10.6095 5.60946 9.97631 5.99999 9.58579L11.2929 4.29289Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoChevronlinUp',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoClose.vue

@@ -10,13 +10,17 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10.5858 12L4.22183 18.364L5.63604 19.7782L12 13.4142L18.364 19.7782L19.7782 18.364L13.4142 12L19.7782 5.63604L18.364 4.22182L12 10.5858L5.63604 4.22183L4.22183 5.63604L10.5858 12Z"
+      d="M4.92893 17.6569C4.53841 18.0474 4.53841 18.6806 4.92893 19.0711C5.31946 19.4616 5.95262 19.4616 6.34315 19.0711L12 13.4142L17.6569 19.0711C18.0474 19.4616 18.6805 19.4616 19.0711 19.0711C19.4616 18.6806 19.4616 18.0474 19.0711 17.6569L13.4142 12L19.0711 6.34315C19.4616 5.95263 19.4616 5.31946 19.0711 4.92894C18.6805 4.53842 18.0474 4.53842 17.6569 4.92894L12 10.5858L6.34315 4.92894C5.95262 4.53842 5.31946 4.53842 4.92893 4.92894C4.53841 5.31947 4.53841 5.95263 4.92893 6.34315L10.5858 12L4.92893 17.6569Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -32,39 +36,11 @@ defineOptions({
 })
 </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-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoCloseOne.vue

@@ -10,19 +10,28 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M7.75736 9.17158L9.17158 7.75736L12 10.5858L14.8284 7.75736L16.2426 9.17158L13.4142 12L16.2426 14.8284L14.8284 16.2426L12 13.4142L9.17158 16.2426L7.75736 14.8284L10.5858 12L7.75736 9.17158Z"
+      d="M8.46447 9.87868C8.07394 9.48816 8.07394 8.85499 8.46447 8.46447C8.85499 8.07394 9.48816 8.07394 9.87868 8.46447L12 10.5858L14.1213 8.46447C14.5118 8.07394 15.145 8.07394 15.5355 8.46447C15.9261 8.85499 15.9261 9.48816 15.5355 9.87868L13.4142 12L15.5355 14.1213C15.9261 14.5118 15.9261 15.145 15.5355 15.5355C15.145 15.9261 14.5118 15.9261 14.1213 15.5355L12 13.4142L9.87868 15.5355C9.48816 15.9261 8.85499 15.9261 8.46447 15.5355C8.07394 15.145 8.07394 14.5118 8.46447 14.1213L10.5858 12L8.46447 9.87868Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -38,39 +47,11 @@ defineOptions({
 })
 </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-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoCoin15.vue

@@ -0,0 +1,48 @@
+<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="M5.3436 4.63809C6.65831 3.8837 8.73502 3.25 12 3.25C15.265 3.25 17.3417 3.8837 18.6564 4.63809C19.9788 5.39689 20.4878 6.25382 20.6519 6.61466C20.7294 6.78497 20.75 6.95011 20.75 7.08114V17.9189C20.75 18.0499 20.7294 18.215 20.6519 18.3853C20.4878 18.7462 19.9788 19.6031 18.6564 20.3619C17.3417 21.1163 15.265 21.75 12 21.75C8.73502 21.75 6.65832 21.1163 5.3436 20.3619C4.0212 19.6031 3.51217 18.7462 3.34809 18.3853C3.27065 18.215 3.25 18.0499 3.25 17.9189V7.08114C3.25 6.95011 3.27065 6.78498 3.34809 6.61466C3.51217 6.25382 4.0212 5.39689 5.3436 4.63809ZM4.75 9.4785V12.8363C4.77654 12.8846 4.81648 12.9505 4.87363 13.0296C5.02573 13.2402 5.30502 13.5519 5.79103 13.876C6.76125 14.5228 8.60492 15.25 12 15.25C15.3951 15.25 17.2388 14.5228 18.209 13.876C18.695 13.5519 18.9743 13.2402 19.1264 13.0296C19.1835 12.9505 19.2235 12.8846 19.25 12.8363V9.4785C19.1832 9.52707 19.1136 9.57563 19.041 9.62403C17.7612 10.4772 15.6049 11.25 12 11.25C8.39508 11.25 6.23875 10.4772 4.95898 9.62403C4.88638 9.57563 4.81675 9.52707 4.75 9.4785ZM4.75 7.33634C4.77654 7.38458 4.81648 7.45049 4.87363 7.52962C5.02573 7.74021 5.30502 8.05195 5.79103 8.37595C6.76125 9.02277 8.60492 9.74999 12 9.74999C15.3951 9.74999 17.2388 9.02277 18.209 8.37595C18.695 8.05195 18.9743 7.74021 19.1264 7.52962C19.1835 7.45049 19.2235 7.38459 19.25 7.33634V7.1636C19.1394 6.96235 18.79 6.44415 17.9099 5.93912C16.8778 5.34692 15.0754 4.75 12 4.75C8.92461 4.75 7.12219 5.34692 6.09014 5.93912C5.20999 6.44415 4.86064 6.96235 4.75 7.1636V7.33634ZM4.75 17.8364V14.9785C4.81675 15.0271 4.88638 15.0756 4.95898 15.124C6.23875 15.9772 8.39508 16.75 12 16.75C15.6049 16.75 17.7612 15.9772 19.041 15.124C19.1136 15.0756 19.1832 15.0271 19.25 14.9785V17.8364C19.1394 18.0377 18.79 18.5558 17.9099 19.0609C16.8778 19.6531 15.0754 20.25 12 20.25C8.92461 20.25 7.12219 19.6531 6.09014 19.0609C5.20999 18.5559 4.86064 18.0377 4.75 17.8364Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoCoin15',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoCommence.vue

@@ -0,0 +1,91 @@
+<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="M21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5H20C20.5523 5 21 4.55228 21 4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M5 9C5 8.44772 4.55228 8 4 8C3.44772 8 3 8.44772 3 9C3 9.55228 3.44772 10 4 10C4.55228 10 5 9.55228 5 9Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M19 9C19 8.44772 19.4477 8 20 8C20.5523 8 21 8.44772 21 9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M5 15C5 14.4477 4.55228 14 4 14C3.44772 14 3 14.4477 3 15C3 15.5523 3.44772 16 4 16C4.55228 16 5 15.5523 5 15Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M19 15C19 14.4477 19.4477 14 20 14C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16C19.4477 16 19 15.5523 19 15Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M21 20C21 19.4477 20.5523 19 20 19H4C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoCommence',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoCommenceContract.vue

@@ -0,0 +1,118 @@
+<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="M5 9.5C5 8.94772 4.55228 8.5 4 8.5C3.44772 8.5 3 8.94772 3 9.5C3 10.0523 3.44772 10.5 4 10.5C4.55228 10.5 5 10.0523 5 9.5Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M19 9.5C19 8.94772 19.4477 8.5 20 8.5C20.5523 8.5 21 8.94772 21 9.5C21 10.0523 20.5523 10.5 20 10.5C19.4477 10.5 19 10.0523 19 9.5Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M5 15C5 14.4477 4.55228 14 4 14C3.44772 14 3 14.4477 3 15C3 15.5523 3.44772 16 4 16C4.55228 16 5 15.5523 5 15Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M19 15C19 14.4477 19.4477 14 20 14C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16C19.4477 16 19 15.5523 19 15Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M21 20C21 19.4477 20.5523 19 20 19H4C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5C4.55228 5 5 4.55228 5 4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M19 4C19 3.44772 19.4477 3 20 3C20.5523 3 21 3.44772 21 4C21 4.55228 20.5523 5 20 5C19.4477 5 19 4.55228 19 4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M10.5 4C10.5 3.44772 10.0523 3 9.5 3C8.94772 3 8.5 3.44772 8.5 4C8.5 4.55228 8.94772 5 9.5 5C10.0523 5 10.5 4.55228 10.5 4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M15.5 4C15.5 3.44772 15.0523 3 14.5 3C13.9477 3 13.5 3.44772 13.5 4C13.5 4.55228 13.9477 5 14.5 5C15.0523 5 15.5 4.55228 15.5 4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoCommenceContract',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoCommenceDown.vue

@@ -0,0 +1,55 @@
+<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="M5.70711 8.22209C6.09764 7.83157 6.7308 7.83157 7.12132 8.2221L11.0711 12.1719L11.0712 3.99999C11.0712 3.4477 11.5189 2.99999 12.0712 3C12.6235 3.00001 13.0712 3.44773 13.0712 4.00001L13.0711 12.1718L17.0208 8.2221C17.4113 7.83157 18.0445 7.83157 18.435 8.2221C18.8255 8.61262 18.8255 9.24577 18.435 9.6363L12.7782 15.2932C12.3877 15.6837 11.7545 15.6837 11.364 15.2932L5.70711 9.6363C5.31658 9.24578 5.31658 8.61261 5.70711 8.22209Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M4 18C3.44772 18 3 18.4477 3 19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19C21 18.4477 20.5523 18 20 18H4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoCommenceDown',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoCommenceLeft.vue

@@ -0,0 +1,55 @@
+<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="M18 4C18 3.44772 18.4477 3 19 3C19.5523 3 20 3.44772 20 4V20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20V4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M10.7781 5.63612C11.1686 6.02664 11.1686 6.65981 10.7781 7.05033L6.82831 11.0001L15.0002 11.0002C15.5525 11.0002 16.0002 11.4479 16.0002 12.0002C16.0002 12.5525 15.5525 13.0002 15.0002 13.0002L6.82841 13.0001L10.7781 16.9498C11.1686 17.3403 11.1686 17.9735 10.7781 18.364C10.3876 18.7546 9.7544 18.7546 9.36386 18.364L3.70702 12.7072C3.31649 12.3167 3.31649 11.6835 3.70702 11.293L9.3639 5.63612C9.75443 5.2456 10.3876 5.2456 10.7781 5.63612Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoCommenceLeft',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoCommenceRight.vue

@@ -0,0 +1,55 @@
+<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="M20 4C20 3.44772 19.5523 3 19 3C18.4477 3 18 3.44772 18 4V20C18 20.5523 18.4477 21 19 21C19.5523 21 20 20.5523 20 20V4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M8.22166 5.636C7.83114 6.02653 7.83114 6.6597 8.22167 7.05022L12.1715 11L3.99956 11.0001C3.44728 11.0001 2.99956 11.4478 2.99957 12.0001C2.99958 12.5524 3.4473 13.0001 3.99958 13.0001L12.1714 13L8.22167 16.9497C7.83114 17.3402 7.83114 17.9734 8.22167 18.3639C8.61219 18.7544 9.24535 18.7544 9.63587 18.3639L15.2928 12.7071C15.6833 12.3166 15.6833 11.6834 15.2928 11.2929L9.63588 5.636C9.24535 5.24548 8.61219 5.24548 8.22166 5.636Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoCommenceRight',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>