bge-ui 1.0.1

package/src/icons/ColorC2RightUp.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 19.5354V11H12.4646V13.9875H15.9L10 19.8875L12.1125 22L18.0125 16.1V19.5354L21 19.5354Z"
+      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: 'ColorC2RightUp',
+})
+</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/ColorC2Safe.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
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M28 4H4V18.0178C4 21.7337 5.93381 25.1818 9.10453 27.1195L16 31.3333L22.8955 27.1195C26.0662 25.1818 28 21.7337 28 18.0178V4Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M17.5 14.5V10H14.5V14.5H10V17.5H14.5V22H17.5V17.5H21L23 14.5H17.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: 'ColorC2Safe',
+})
+</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/ColorC2SafeShield.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
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.0059 0.958252L29 4.75409V12.6891C29 20.672 23.8913 27.7589 16.3178 30.2824L16.0018 30.3877L15.6857 30.2824C8.11026 27.759 3 20.6705 3 12.6858V4.75389L16.0059 0.958252Z"
+      class="bge-fill-icon-gray"
+    />
+    <path d="M14.5 10H17.5V22H14.5V10Z" 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: 'ColorC2SafeShield',
+})
+</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/ColorC2TrafficCone.vue

@@ -0,0 +1,79 @@
+<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="M16 3L11.9 12H20.1L16 3Z" class="bge-fill-icon-gray" />
+    <path
+      d="M21.5 15H10.5L8.70001 19H23.3L21.5 15Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M24.6 22L26 25H28V28H4V25H6L7.4 22H24.6Z"
+      class="bge-fill-icon-gray"
+    />
+    <path d="M11.9 12H20.1L21.5 15H10.5L11.9 12Z" class="bge-fill-icon-theme" />
+    <path
+      d="M8.69999 19H23.3L24.6 22H7.39999L8.69999 19Z"
+      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: 'ColorC2TrafficCone',
+})
+</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/ColorC2User.vue

@@ -0,0 +1,79 @@
+<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
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.5 3C11.6281 3 9.30001 5.32812 9.30001 8.2V12.1C9.30001 14.9719 11.6281 17.3 14.5 17.3H17.1C19.9719 17.3 22.3 14.9719 22.3 12.1V3H14.5Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M27.5 24.7C27.5 22.049 25.351 19.9 22.7 19.9H8.90001C6.24904 19.9 4.10001 22.049 4.10001 24.7V29H6.70001H24.9H27.5V24.7Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M18.4 19.8999H13.2L15.8 28.9999L18.4 19.8999Z"
+      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: 'ColorC2User',
+})
+</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/ColorC2UserEvery.vue

@@ -0,0 +1,90 @@
+<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="M11.5 7.63636C11.5 5.62806 13.1118 4 15.1 4H20.5V10.3636C20.5 12.3719 18.8882 14 16.9 14H15.1C13.1118 14 11.5 12.3719 11.5 10.3636V7.63636Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M22 12.5455C22 11.1396 23.0745 10 24.4 10H28V14.4545C28 15.8604 26.9255 17 25.6 17H24.4C23.0745 17 22 15.8604 22 14.4545V12.5455Z"
+      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.2522C10.0497 16.9189 11.4176 16 13 16H19C20.5824 16 21.9503 16.9189 22.599 18.2522C22.6012 18.2568 22.6034 18.2613 22.6056 18.2658Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M8.40716 18.0205C8.27328 18.0069 8.13745 18 8 18H6C3.79086 18 2 19.7909 2 22V28H8V20C8 19.2968 8.14516 18.6275 8.40716 18.0205Z"
+      class="bge-fill-icon-gray"
+    />
+    <path
+      d="M24 28V20C24 19.2968 23.8548 18.6275 23.5928 18.0205C23.7267 18.0069 23.8626 18 24 18H26C28.2091 18 30 19.7909 30 22V28H24Z"
+      class="bge-fill-icon-gray"
+    />
+    <path d="M18 16H14L16 24L18 16Z" 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: 'ColorC2UserEvery',
+})
+</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/ColorC3Audits.vue

@@ -0,0 +1,76 @@
+<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="M2.5 3.5L24 3.5V24L24 28.5H21H2.5L2.5 3.5Z"
+      class="bge-fill-icon-gray"
+    />
+    <path d="M7 16H15L13 19H7V16Z" class="bge-fill-gay-dark" />
+    <path d="M7 10H18.5L16.5 13H7V10Z" class="bge-fill-gay-dark" />
+    <rect x="17" y="25.5" width="13" height="3" class="bge-fill-icon-theme" />
+    <path
+      d="M28 17.5H19V20.5H20.4705L18.5 25.5H28.5L26.5295 20.5H28V17.5Z"
+      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: 'ColorC3Audits',
+})
+</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/ColorC3Card.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="M30 6H2V26H30V6Z" class="bge-fill-icon-gray" />
+    <path d="M5 19H14L12 22H5V19Z" class="bge-fill-icon-theme" />
+    <path d="M30 13H2V10H30V13Z" 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: 'ColorC3Card',
+})
+</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/ColorC3Company.vue

@@ -0,0 +1,69 @@
+<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="M21 1L3 11.5V30L29 30V13.5L21 9V1Z" class="bge-fill-icon-gray" />
+    <path d="M7 14H16L14 17H7V14Z" class="bge-fill-icon-theme" />
+    <path d="M7 20H16L14 23H7V20Z" class="bge-fill-icon-theme" />
+    <path d="M24 10.6875L21 9V30H24V10.6875Z" 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: 'ColorC3Company',
+})
+</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>