bge-ui 1.0.21 → 1.0.23

package/src/icons/LogoDiscord.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="M15.003 4C15.747 4 16.533 4.26 17.253 4.547L17.78 4.763C19.04 5.291 19.748 6.399 20.297 7.616C21.188 9.591 21.807 12.224 22.021 14.226C22.123 15.176 22.148 16.132 21.965 16.775C21.768 17.462 21.098 17.948 20.447 18.33L20.125 18.513L19.791 18.699C19.619 18.795 19.442 18.89 19.266 18.983L18.744 19.253L18.027 19.61L17.45 19.894C17.3321 19.9576 17.2027 19.9968 17.0693 20.0094C16.936 20.022 16.8015 20.0077 16.6738 19.9673C16.5461 19.9269 16.4279 19.8613 16.326 19.7743C16.2242 19.6874 16.1408 19.5808 16.0809 19.461C16.021 19.3413 15.9858 19.2107 15.9774 19.077C15.9689 18.9433 15.9874 18.8094 16.0317 18.683C16.076 18.5566 16.1452 18.4404 16.2353 18.3413C16.3254 18.2422 16.4344 18.1622 16.556 18.106L17.346 17.716L16.766 17.107C15.376 17.677 13.739 18 12 18C10.261 18 8.624 17.678 7.234 17.107L6.654 17.715L7.447 18.105C7.56453 18.1637 7.66935 18.245 7.75548 18.3442C7.8416 18.4434 7.90734 18.5586 7.94894 18.6832C7.99054 18.8078 8.00718 18.9394 7.99793 19.0705C7.98868 19.2015 7.9537 19.3295 7.895 19.447C7.8363 19.5645 7.75502 19.6694 7.65581 19.7555C7.5566 19.8416 7.4414 19.9073 7.31678 19.9489C7.06511 20.033 6.79037 20.0136 6.553 19.895L6.009 19.625C5.607 19.425 5.204 19.227 4.806 19.018L3.878 18.513L3.557 18.33C2.906 17.948 2.235 17.462 2.039 16.775C1.855 16.132 1.881 15.177 1.982 14.225C2.196 12.224 2.815 9.591 3.706 7.616C4.255 6.399 4.963 5.291 6.223 4.763C7.059 4.413 8.072 4 9 4C9.603 4 10.077 4.555 9.99 5.147C10.6555 5.04854 11.3273 4.9994 12 5C12.691 5 13.366 5.05 14.014 5.148C13.9947 5.00599 14.0058 4.8615 14.0466 4.72411C14.0874 4.58671 14.1568 4.45954 14.2504 4.35101C14.344 4.24248 14.4596 4.15507 14.5895 4.09456C14.7194 4.03404 14.8597 4.00181 15.003 4ZM8.75 10.5C8.28587 10.5 7.84075 10.6844 7.51256 11.0126C7.18437 11.3408 7 11.7859 7 12.25C7 12.7141 7.18437 13.1592 7.51256 13.4874C7.84075 13.8156 8.28587 14 8.75 14C9.21413 14 9.65925 13.8156 9.98744 13.4874C10.3156 13.1592 10.5 12.7141 10.5 12.25C10.5 11.7859 10.3156 11.3408 9.98744 11.0126C9.65925 10.6844 9.21413 10.5 8.75 10.5ZM15.25 10.5C14.7859 10.5 14.3408 10.6844 14.0126 11.0126C13.6844 11.3408 13.5 11.7859 13.5 12.25C13.5 12.7141 13.6844 13.1592 14.0126 13.4874C14.3408 13.8156 14.7859 14 15.25 14C15.7141 14 16.1592 13.8156 16.4874 13.4874C16.8156 13.1592 17 12.7141 17 12.25C17 11.7859 16.8156 11.3408 16.4874 11.0126C16.1592 10.6844 15.7141 10.5 15.25 10.5Z"
+      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: 'LogoDiscord',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/LogoFacebook.vue

@@ -0,0 +1,46 @@
+<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.5 21.888C18.311 21.164 22 17.013 22 12C22 6.477 17.523 2 12 2C6.477 2 2 6.477 2 12C2 17.013 5.689 21.165 10.5 21.888V15H9C8.60218 15 8.22064 14.842 7.93934 14.5607C7.65804 14.2794 7.5 13.8978 7.5 13.5C7.5 13.1022 7.65804 12.7206 7.93934 12.4393C8.22064 12.158 8.60218 12 9 12H10.5V10C10.5 9.07174 10.8687 8.1815 11.5251 7.52513C12.1815 6.86875 13.0717 6.5 14 6.5H14.5C14.8978 6.5 15.2794 6.65804 15.5607 6.93934C15.842 7.22064 16 7.60218 16 8C16 8.39782 15.842 8.77936 15.5607 9.06066C15.2794 9.34196 14.8978 9.5 14.5 9.5H14C13.8674 9.5 13.7402 9.55268 13.6464 9.64645C13.5527 9.74021 13.5 9.86739 13.5 10V12H15C15.3978 12 15.7794 12.158 16.0607 12.4393C16.342 12.7206 16.5 13.1022 16.5 13.5C16.5 13.8978 16.342 14.2794 16.0607 14.5607C15.7794 14.842 15.3978 15 15 15H13.5V21.888Z"
+      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: 'LogoFacebook',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/LogoIns.vue

@@ -0,0 +1,46 @@
+<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 3C17.3261 3 18.5979 3.52678 19.5355 4.46447C20.4732 5.40215 21 6.67392 21 8V16C21 17.3261 20.4732 18.5979 19.5355 19.5355C18.5979 20.4732 17.3261 21 16 21H8C6.67392 21 5.40215 20.4732 4.46447 19.5355C3.52678 18.5979 3 17.3261 3 16V8C3 6.67392 3.52678 5.40215 4.46447 4.46447C5.40215 3.52678 6.67392 3 8 3H16ZM12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8ZM12 10C12.5304 10 13.0391 10.2107 13.4142 10.5858C13.7893 10.9609 14 11.4696 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14C11.4696 14 10.9609 13.7893 10.5858 13.4142C10.2107 13.0391 10 12.5304 10 12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10ZM16.5 6.5C16.2348 6.5 15.9804 6.60536 15.7929 6.79289C15.6054 6.98043 15.5 7.23478 15.5 7.5C15.5 7.76522 15.6054 8.01957 15.7929 8.20711C15.9804 8.39464 16.2348 8.5 16.5 8.5C16.7652 8.5 17.0196 8.39464 17.2071 8.20711C17.3946 8.01957 17.5 7.76522 17.5 7.5C17.5 7.23478 17.3946 6.98043 17.2071 6.79289C17.0196 6.60536 16.7652 6.5 16.5 6.5Z"
+      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: 'LogoIns',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/LogoLinkedin.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="M18 3C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V18C21 18.7956 20.6839 19.5587 20.1213 20.1213C19.5587 20.6839 18.7956 21 18 21H6C5.20435 21 4.44129 20.6839 3.87868 20.1213C3.31607 19.5587 3 18.7956 3 18V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H18ZM8 10C7.73478 10 7.48043 10.1054 7.29289 10.2929C7.10536 10.4804 7 10.7348 7 11V16C7 16.2652 7.10536 16.5196 7.29289 16.7071C7.48043 16.8946 7.73478 17 8 17C8.26522 17 8.51957 16.8946 8.70711 16.7071C8.89464 16.5196 9 16.2652 9 16V11C9 10.7348 8.89464 10.4804 8.70711 10.2929C8.51957 10.1054 8.26522 10 8 10ZM11 9C10.7348 9 10.4804 9.10536 10.2929 9.29289C10.1054 9.48043 10 9.73478 10 10V16C10 16.2652 10.1054 16.5196 10.2929 16.7071C10.4804 16.8946 10.7348 17 11 17C11.2652 17 11.5196 16.8946 11.7071 16.7071C11.8946 16.5196 12 16.2652 12 16V12.34C12.305 11.996 12.82 11.592 13.393 11.347C13.726 11.205 14.227 11.147 14.575 11.257C14.727 11.305 14.815 11.373 14.868 11.445C14.92 11.515 15 11.671 15 12V16C15 16.2652 15.1054 16.5196 15.2929 16.7071C15.4804 16.8946 15.7348 17 16 17C16.2652 17 16.5196 16.8946 16.7071 16.7071C16.8946 16.5196 17 16.2652 17 16V12C17 11.33 16.83 10.734 16.476 10.256C16.1503 9.82256 15.6944 9.50472 15.175 9.349C14.273 9.066 13.274 9.223 12.607 9.509C12.3933 9.60046 12.1852 9.70465 11.984 9.821C11.9421 9.59059 11.8206 9.3822 11.6408 9.23216C11.461 9.08213 11.2342 8.99996 11 9ZM8 7C7.73478 7 7.48043 7.10536 7.29289 7.29289C7.10536 7.48043 7 7.73478 7 8C7 8.26522 7.10536 8.51957 7.29289 8.70711C7.48043 8.89464 7.73478 9 8 9C8.26522 9 8.51957 8.89464 8.70711 8.70711C8.89464 8.51957 9 8.26522 9 8C9 7.73478 8.89464 7.48043 8.70711 7.29289C8.51957 7.10536 8.26522 7 8 7Z"
+      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: 'LogoLinkedin',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/LogoMedium.vue

@@ -0,0 +1,46 @@
+<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="M8 6C9.5913 6 11.1174 6.63214 12.2426 7.75736C13.3679 8.88258 14 10.4087 14 12C14 13.5913 13.3679 15.1174 12.2426 16.2426C11.1174 17.3679 9.5913 18 8 18C6.4087 18 4.88258 17.3679 3.75736 16.2426C2.63214 15.1174 2 13.5913 2 12C2 10.4087 2.63214 8.88258 3.75736 7.75736C4.88258 6.63214 6.4087 6 8 6ZM17 7C18.5 7 19.5 9.239 19.5 12C19.5 14.761 18.5 17 17 17C15.5 17 14.5 14.761 14.5 12C14.5 9.239 15.5 7 17 7ZM21 7.5C21.38 7.5 21.712 8.327 21.88 9.746L21.927 10.189L21.946 10.424L21.976 10.918L21.986 11.177L21.998 11.718L22 12L21.998 12.282L21.986 12.823L21.976 13.083L21.946 13.576L21.926 13.811L21.881 14.254C21.712 15.674 21.381 16.5 21 16.5C20.62 16.5 20.288 15.673 20.12 14.254L20.073 13.811C20.0661 13.7327 20.0598 13.6544 20.054 13.576L20.024 13.082C20.0201 12.9957 20.0168 12.9094 20.014 12.823L20.002 12.282V11.718L20.014 11.177L20.024 10.917L20.054 10.424L20.074 10.189L20.119 9.746C20.288 8.326 20.619 7.5 21 7.5Z"
+      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: 'LogoMedium',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/LogoReddit.vue

@@ -0,0 +1,46 @@
+<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.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2ZM15 6C14.7 6 14.432 6.131 14.249 6.34L12.599 6.01C12.5322 5.99652 12.4634 5.99683 12.3967 6.0109C12.3301 6.02498 12.267 6.05253 12.2114 6.09186C12.1558 6.13119 12.1088 6.18147 12.0733 6.23962C12.0378 6.29776 12.0146 6.36255 12.005 6.43L11.637 9.008C10.214 9.071 8.898 9.501 7.891 10.206C7.69915 10.3401 7.51641 10.4867 7.344 10.645C6.98851 10.471 6.57864 10.4445 6.20372 10.5713C5.82879 10.6982 5.51919 10.9681 5.34239 11.3222C5.1656 11.6763 5.13593 12.086 5.25986 12.4619C5.38378 12.8378 5.65126 13.1495 6.004 13.329L6 13.5C6 14.882 6.802 16.032 7.891 16.794C8.983 17.56 10.439 18 12 18C13.56 18 15.017 17.559 16.109 16.794C17.199 16.032 18 14.882 18 13.5L17.996 13.33C18.3521 13.1523 18.6229 12.8404 18.7491 12.463C18.8752 12.0856 18.8462 11.6736 18.6685 11.3175C18.4908 10.9614 18.1789 10.6906 17.8015 10.5644C17.4241 10.4383 17.0121 10.4673 16.656 10.645C16.4836 10.4864 16.3009 10.3394 16.109 10.205C15.169 9.548 13.959 9.129 12.644 9.025L12.92 7.094L14.052 7.32C14.1109 7.49424 14.2166 7.64887 14.3576 7.7669C14.4987 7.88492 14.6695 7.96177 14.8514 7.98899C15.0333 8.01621 15.2192 7.99274 15.3886 7.92117C15.558 7.84961 15.7044 7.73271 15.8117 7.58333C15.9189 7.43396 15.9829 7.25789 15.9966 7.0745C16.0103 6.8911 15.9732 6.70748 15.8893 6.54382C15.8054 6.38017 15.678 6.24281 15.5211 6.14687C15.3642 6.05093 15.1839 6.00011 15 6ZM9.5 12C9.89782 12 10.2794 12.158 10.5607 12.4393C10.842 12.7206 11 13.1022 11 13.5C11 13.8978 10.842 14.2794 10.5607 14.5607C10.2794 14.842 9.89782 15 9.5 15C9.10218 15 8.72064 14.842 8.43934 14.5607C8.15804 14.2794 8 13.8978 8 13.5C8 13.1022 8.15804 12.7206 8.43934 12.4393C8.72064 12.158 9.10218 12 9.5 12ZM14.5 12C14.8978 12 15.2794 12.158 15.5607 12.4393C15.842 12.7206 16 13.1022 16 13.5C16 13.8978 15.842 14.2794 15.5607 14.5607C15.2794 14.842 14.8978 15 14.5 15C14.1022 15 13.7206 14.842 13.4393 14.5607C13.158 14.2794 13 13.8978 13 13.5C13 13.1022 13.158 12.7206 13.4393 12.4393C13.7206 12.158 14.1022 12 14.5 12Z"
+      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: 'LogoReddit',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/LogoTelegram.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="M19.777 4.43003C20.0241 4.32602 20.2946 4.29015 20.5603 4.32614C20.826 4.36214 21.0772 4.46869 21.2877 4.63471C21.4982 4.80073 21.6604 5.02014 21.7574 5.27011C21.8543 5.52008 21.8825 5.79147 21.839 6.05603L19.571 19.813C19.351 21.14 17.895 21.901 16.678 21.24C15.66 20.687 14.148 19.835 12.788 18.946C12.108 18.501 10.025 17.076 10.281 16.062C10.501 15.195 14.001 11.937 16.001 10C16.786 9.23903 16.428 8.80003 15.501 9.50003C13.199 11.238 9.503 13.881 8.281 14.625C7.203 15.281 6.641 15.393 5.969 15.281C4.743 15.077 3.606 14.761 2.678 14.376C1.424 13.856 1.485 12.132 2.677 11.63L19.777 4.43003Z"
+      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: 'LogoTelegram',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/LogoX.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="M19.753 4.659C19.8395 4.56011 19.9056 4.44516 19.9477 4.32071C19.9897 4.19626 20.0069 4.06475 19.9981 3.93368C19.9893 3.80261 19.9548 3.67455 19.8965 3.55682C19.8383 3.43908 19.7574 3.33398 19.6585 3.2475C19.5596 3.16102 19.4447 3.09487 19.3202 3.05282C19.1958 3.01077 19.0642 2.99364 18.9332 3.00242C18.8021 3.01119 18.6741 3.0457 18.5563 3.10396C18.4386 3.16223 18.3335 3.24311 18.247 3.342L13.137 9.182L8.8 3.4C8.70685 3.2758 8.58607 3.175 8.44721 3.10557C8.30836 3.03614 8.15525 3 8 3H4C3.81429 3 3.63225 3.05171 3.47427 3.14935C3.31629 3.24698 3.18863 3.38668 3.10557 3.55279C3.02252 3.71889 2.98736 3.90484 3.00404 4.08981C3.02072 4.27477 3.08857 4.45143 3.2 4.6L9.637 13.182L4.247 19.342C4.16053 19.4409 4.09437 19.5558 4.05232 19.6803C4.01027 19.8047 3.99314 19.9363 4.00192 20.0673C4.01069 20.1984 4.0452 20.3264 4.10347 20.4442C4.16173 20.5619 4.24261 20.667 4.3415 20.7535C4.44039 20.84 4.55534 20.9061 4.67979 20.9482C4.80424 20.9902 4.93575 21.0074 5.06682 20.9986C5.19789 20.9898 5.32595 20.9553 5.44368 20.897C5.56142 20.8388 5.66652 20.7579 5.753 20.659L10.863 14.818L15.2 20.6C15.2931 20.7242 15.4139 20.825 15.5528 20.8944C15.6916 20.9639 15.8448 21 16 21H20C20.1857 21 20.3678 20.9483 20.5257 20.8507C20.6837 20.753 20.8114 20.6133 20.8944 20.4472C20.9775 20.2811 21.0126 20.0952 20.996 19.9102C20.9793 19.7252 20.9114 19.5486 20.8 19.4L14.363 10.818L19.753 4.659ZM16.5 19L6 5H7.5L18 19H16.5Z"
+      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: 'LogoX',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/LogoYoutube.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="M12 4C12.855 4 13.732 4.022 14.582 4.058L15.586 4.106L16.547 4.163L17.447 4.224L18.269 4.288C19.161 4.35628 20.0004 4.73695 20.6395 5.36304C21.2786 5.98913 21.6764 6.82054 21.763 7.711L21.803 8.136L21.878 9.046C21.948 9.989 22 11.017 22 12C22 12.983 21.948 14.011 21.878 14.954L21.803 15.864C21.79 16.01 21.777 16.151 21.763 16.289C21.6764 17.1796 21.2784 18.0112 20.6391 18.6373C19.9999 19.2634 19.1602 19.6439 18.268 19.712L17.448 19.775L16.548 19.837L15.586 19.894L14.582 19.942C13.732 19.978 12.855 20 12 20C11.145 20 10.268 19.978 9.418 19.942L8.414 19.894L7.453 19.837L6.553 19.775L5.731 19.712C4.83895 19.6437 3.99955 19.2631 3.36047 18.637C2.72139 18.0109 2.32357 17.1795 2.237 16.289L2.197 15.864L2.122 14.954C2.04554 13.9711 2.00484 12.9858 2 12C2 11.017 2.052 9.989 2.122 9.046L2.197 8.136C2.21 7.99 2.223 7.849 2.237 7.711C2.32354 6.8207 2.72122 5.98942 3.36009 5.36334C3.99897 4.73727 4.83813 4.3565 5.73 4.288L6.551 4.224L7.451 4.163L8.413 4.106L9.417 4.058C10.268 4.022 11.145 4 12 4ZM10 9.575V14.425C10 14.887 10.5 15.175 10.9 14.945L15.1 12.52C15.1914 12.4674 15.2673 12.3916 15.3201 12.3003C15.3729 12.209 15.4007 12.1055 15.4007 12C15.4007 11.8945 15.3729 11.791 15.3201 11.6997C15.2673 11.6084 15.1914 11.5326 15.1 11.48L10.9 9.056C10.8088 9.00332 10.7053 8.9756 10.5999 8.97562C10.4945 8.97563 10.3911 9.00339 10.2998 9.0561C10.2086 9.1088 10.1329 9.1846 10.0802 9.27587C10.0276 9.36713 9.99993 9.47065 10 9.576V9.575Z"
+      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: 'LogoYoutube',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoAdd.vue

@@ -10,13 +10,17 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M11 11H3L3 13H11V21H13V13H21V11H13V3L11 3V11Z"
+      d="M11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H13V4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H11V20Z"
       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/MonoAddStroke.vue

@@ -0,0 +1,57 @@
+<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="M7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12Z"
+      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="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM19 5H5V19H19V5Z"
+      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: 'MonoAddStroke',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoArrow.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="M8.06755 13H15.9325C16.3564 13 16.588 13.4944 16.3166 13.8201L12.3841 18.5391C12.1842 18.7789 11.8158 18.7789 11.6159 18.5391L7.68343 13.8201C7.41205 13.4944 7.64363 13 8.06755 13Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M8.06755 11H15.9325C16.3564 11 16.588 10.5056 16.3166 10.1799L12.3841 5.46091C12.1842 5.22104 11.8158 5.22104 11.6159 5.46091L7.68343 10.1799C7.41205 10.5056 7.64363 11 8.06755 11Z"
+      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: 'MonoArrow',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoArrowDown.vue

@@ -9,11 +9,18 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M18 9H6L12 16L18 9Z" fill="currentColor" />
+    <path
+      d="M16.9129 9H7.08711C6.65993 9 6.42948 9.50106 6.70748 9.8254L11.6204 15.5571C11.8199 15.7899 12.1801 15.7899 12.3796 15.5571L17.2925 9.8254C17.5705 9.50106 17.3401 9 16.9129 9Z"
+      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,
@@ -29,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>