bge-ui 1.0.1

package/src/icons/IntlKor.vue

@@ -0,0 +1,88 @@
+<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="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 10.5709 15.2376 9.25043 14 8.5359C12.7624 7.82137 11.2376 7.82137 10 8.5359C8.7624 9.25043 8 10.5709 8 12H8Z"
+      fill="#E01B41"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16 12.2751C15.3775 10.5459 13.1272 10.5753 11.9913 12.3642C10.8554 14.1531 9.15335 13.518 8 12.4104C8.31089 14.5023 10.0413 16.0335 12.056 15.9994C14.0707 15.9654 15.7533 14.3764 16 12.2751Z"
+      fill="#0E4B9C"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.60285 6.01083C5.52985 6.03255 5.46811 6.08537 5.4317 6.15721L4.04126 8.76461C4.00306 8.83495 3.99227 8.91886 4.01128 8.99782C4.03029 9.07679 4.07754 9.14432 4.1426 9.18553L4.62138 9.48681C4.68659 9.52842 4.7646 9.53964 4.83759 9.51792C4.91058 9.4962 4.97233 9.44339 5.00873 9.37154L6.40027 6.76256C6.43848 6.69222 6.44927 6.60831 6.43026 6.52934C6.41125 6.45038 6.364 6.38285 6.29894 6.34164L5.81906 6.04195C5.75384 6.00034 5.67584 5.98911 5.60285 6.01083ZM7.0556 6.91746C6.98261 6.93918 6.92087 6.99199 6.88446 7.06384L5.49329 9.67123C5.45508 9.74157 5.44429 9.82548 5.4633 9.90444C5.48231 9.98341 5.52956 10.0509 5.59462 10.0921L6.07414 10.3918C6.13935 10.4334 6.21736 10.4447 6.29035 10.423C6.36334 10.4012 6.42509 10.3484 6.46149 10.2766L7.85303 7.66759C7.9316 7.52144 7.88631 7.33404 7.75169 7.24826L7.27181 6.94857C7.2066 6.90696 7.12859 6.89574 7.0556 6.91746ZM18.9905 14.63C19.027 14.5583 19.0887 14.5055 19.1617 14.4838C19.2346 14.4621 19.3126 14.4733 19.3779 14.5148L19.857 14.8145C19.9221 14.8557 19.9693 14.9232 19.9883 15.0022C20.0073 15.0811 19.9965 15.165 19.9583 15.2354L18.5675 17.8428C18.5311 17.9146 18.4694 17.9674 18.3964 17.9892C18.3234 18.0109 18.2454 17.9997 18.1802 17.9581L17.7003 17.6584C17.6352 17.6172 17.588 17.5496 17.569 17.4707C17.55 17.3917 17.5608 17.3078 17.599 17.2374L18.9905 14.63ZM17.7088 13.576C17.6359 13.5977 17.5741 13.6505 17.5376 13.7222L16.1465 16.3324C16.1082 16.4027 16.0974 16.4866 16.1163 16.5655C16.1353 16.6445 16.1824 16.712 16.2474 16.7533L16.7273 17.053C16.7925 17.0946 16.8705 17.1058 16.9435 17.0841C17.0165 17.0624 17.0783 17.0096 17.1147 16.9377L18.5062 14.3288C18.5444 14.2584 18.5552 14.1745 18.5362 14.0955C18.5172 14.0166 18.4699 13.949 18.4049 13.9078L17.925 13.607C17.8597 13.5655 17.7818 13.5543 17.7088 13.576ZM5.49292 14.3272C5.4541 14.2572 5.44301 14.1733 5.46215 14.0943C5.4813 14.0154 5.52906 13.9481 5.59462 13.9079L6.0745 13.6082C6.13997 13.5678 6.2176 13.5572 6.29026 13.5788C6.36292 13.6005 6.42466 13.6525 6.46186 13.7234L7.85303 16.3324C7.89236 16.4025 7.90378 16.4868 7.88468 16.5661C7.86558 16.6454 7.8176 16.713 7.7517 16.7533L7.27182 17.053C7.20634 17.0934 7.12872 17.104 7.05606 17.0823C6.9834 17.0607 6.92166 17.0087 6.88446 16.9378L5.49292 14.3272ZM4.00917 15.0015C3.98993 15.0809 4.00124 15.1652 4.04051 15.2354L5.43021 17.8444C5.46741 17.9153 5.52914 17.9673 5.60181 17.989C5.67447 18.0106 5.75209 18 5.81756 17.9596L6.29744 17.6599C6.36335 17.6196 6.41133 17.552 6.43043 17.4727C6.44952 17.3934 6.43811 17.3091 6.39878 17.239L5.00724 14.63C4.97004 14.5591 4.9083 14.5071 4.83564 14.4855C4.76298 14.4638 4.68536 14.4744 4.61989 14.5148L4.14258 14.8145C4.07655 14.8547 4.02841 14.9222 4.00917 15.0015ZM17.5995 6.76096C17.5601 6.69091 17.5487 6.6066 17.5678 6.52728C17.5869 6.44796 17.6349 6.3804 17.7008 6.34004L18.1807 6.04035C18.2462 5.99996 18.3238 5.98941 18.3964 6.01103C18.4691 6.03266 18.5308 6.08467 18.568 6.15562L19.9596 8.7646C19.9988 8.83479 20.0101 8.91922 19.9908 8.99856C19.9715 9.0779 19.9232 9.14536 19.8571 9.18552L19.3798 9.48521C19.3144 9.5256 19.2367 9.53615 19.1641 9.51453C19.0914 9.4929 19.0297 9.44089 18.9925 9.36994L17.5995 6.76096ZM16.1149 7.43391C16.0958 7.51323 16.1072 7.59754 16.1466 7.66759L17.5377 10.2766C17.5749 10.3475 17.6367 10.3995 17.7093 10.4212C17.782 10.4428 17.8596 10.4322 17.9251 10.3918L18.405 10.0921C18.4709 10.0519 18.519 9.98433 18.5382 9.905C18.5573 9.82567 18.546 9.74132 18.5067 9.67123L17.1151 7.06225C17.0779 6.9913 17.0162 6.93929 16.9435 6.91766C16.8709 6.89604 16.7932 6.90659 16.7278 6.94698L16.2479 7.24667C16.182 7.28703 16.134 7.35459 16.1149 7.43391Z"
+      fill="#262626"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'IntlKor',
+})
+</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/IntlUsa.vue

@@ -0,0 +1,83 @@
+<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="12" fill="white" fill-opacity="0.95" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M5.99746 22.4007H18.0026C16.2361 23.418 14.1862 24 12 24C9.81388 24 7.76397 23.418 5.99746 22.4007ZM3.82345 20.7999C3.29557 20.3113 2.81172 19.776 2.3785 19.2006H21.6215C21.1882 19.776 20.7044 20.3113 20.1765 20.7999H3.82345ZM1.3606 17.5998C1.08924 17.0875 0.853953 16.5533 0.658106 16.0005H23.3418C23.1459 16.5533 22.9106 17.0875 22.6393 17.5998H1.3606ZM0.214178 14.3997C0.108081 13.8781 0.0358893 13.3442 0 12.8004H24C23.9641 13.3442 23.8919 13.8781 23.7858 14.3997H0.214178ZM0 11.1996C0.0358893 10.6558 0.108081 10.1219 0.214178 9.60032H23.7858C23.8919 10.1219 23.9641 10.6558 24 11.1996H0ZM0.658247 7.99951C0.854093 7.4467 1.08938 6.91248 1.36074 6.40022L22.6394 6.40023C22.9108 6.91248 23.146 7.4467 23.3419 7.99951H0.658247ZM2.3785 4.79939C2.81172 4.22398 3.29557 3.6887 3.82345 3.20012H20.1765C20.7044 3.6887 21.1882 4.22398 21.6215 4.79939H2.3785ZM5.99746 1.59927C7.76397 0.582033 9.81388 0 12 0C14.1862 0 16.2361 0.582033 18.0026 1.59927H5.99746Z"
+      fill="#D02F44"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 11C0.41001 4.8572 5.58792 0 11.9152 0C11.9435 0 11.9718 9.71228e-05 12 0.000291049V11H0Z"
+      fill="#46467F"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1 7.9145C1.04223 7.79705 1.08638 7.68046 1.13243 7.56476L1.30554 8.13136L1 7.9145ZM1.1936 7.41442C1.24208 7.29757 1.2925 7.18166 1.34481 7.06673L1.64704 7.07136L1.1936 7.41442ZM2.26322 5.42653C2.30063 5.37104 2.33851 5.31588 2.37688 5.26105L2.72651 5.25569L2.94499 4.61091L3.16346 5.25569L3.83888 5.26604L3.29848 5.67489L3.49744 6.32607L2.94499 5.93396L2.39253 6.32607L2.59149 5.67489L2.26322 5.42653ZM3.91334 3.48009C3.92052 3.47328 3.92771 3.46648 3.93492 3.45969L4.56276 3.45007L4.78124 2.80529L4.99971 3.45007L5.67513 3.46042L5.13473 3.86926L5.33369 4.52044L4.78124 4.12834L4.22878 4.52044L4.42774 3.86926L3.91334 3.48009ZM5.9737 1.91396C6.2099 1.77173 6.45164 1.63719 6.69853 1.5107L6.74396 1.64479L7.41938 1.65513L6.87898 2.06398L7.07794 2.71516L6.52549 2.32306L5.97303 2.71516L6.17199 2.06398L5.9737 1.91396ZM10.1061 2.37167L9.55365 2.77818L9.75261 2.10307L9.21221 1.67921L9.88763 1.66848L10.1061 1L10.3246 1.66848L11 1.67921L10.4596 2.10307L10.6586 2.77818L10.1061 2.37167ZM8.80936 4.12834L8.2569 4.52044L8.45586 3.86926L7.91546 3.46042L8.59088 3.45007L8.80936 2.80529L9.02783 3.45007L9.70325 3.46042L9.16285 3.86926L9.36181 4.52044L8.80936 4.12834ZM6.52546 5.93396L5.973 6.32607L6.17196 5.67489L5.63156 5.26604L6.30698 5.25569L6.52546 4.61091L6.74393 5.25569L7.41935 5.26604L6.87895 5.67489L7.07791 6.32607L6.52546 5.93396ZM10.1061 5.98258L9.55365 6.38909L9.75261 5.71398L9.21221 5.29011L9.88763 5.27939L10.1061 4.61091L10.3246 5.27939L11 5.29011L10.4596 5.71398L10.6586 6.38909L10.1061 5.98258ZM2.94495 9.54487L2.39249 9.93697L2.59145 9.2858L2.05105 8.87695L2.72648 8.8666L2.94495 8.22182L3.16342 8.8666L3.83885 8.87695L3.29845 9.2858L3.49741 9.93697L2.94495 9.54487ZM6.52546 9.54487L5.973 9.93697L6.17196 9.2858L5.63156 8.87695L6.30698 8.8666L6.52546 8.22182L6.74393 8.8666L7.41935 8.87695L6.87895 9.2858L7.07791 9.93697L6.52546 9.54487ZM10.1061 9.59349L9.55365 10L9.75261 9.32489L9.21221 8.90102L9.88763 8.8903L10.1061 8.22182L10.3246 8.8903L11 8.90102L10.4596 9.32489L10.6586 10L10.1061 9.59349ZM4.78129 7.73928L4.22883 8.13138L4.42779 7.4802L3.88739 7.07136L4.56281 7.06101L4.78129 6.41623L4.99976 7.06101L5.67518 7.07136L5.13479 7.4802L5.33375 8.13138L4.78129 7.73928ZM8.80936 7.73928L8.2569 8.13138L8.45586 7.4802L7.91546 7.07136L8.59088 7.06101L8.80936 6.41623L9.02783 7.06101L9.70325 7.07136L9.16285 7.4802L9.36181 8.13138L8.80936 7.73928Z"
+      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: 'IntlUsa',
+})
+</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/IntlVnm.vue

@@ -0,0 +1,76 @@
+<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="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+      fill="#EB1730"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 14.425L7.29772 17.5676L9.0327 12.4039L4.39155 9.18237L10.1661 9.13363L12 4L13.8339 9.13363L19.6085 9.18237L14.9673 12.4039L16.7023 17.5676L12 14.425Z"
+      fill="#FFDC42"
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'IntlVnm',
+})
+</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/MediaFacebook.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="M9.525 23.625V13.0234H5.9625V8.8875H9.525V5.83988C9.525 4.10687 10.0094 2.76275 10.9781 1.8075C11.9469 0.85225 13.2375 0.37475 14.85 0.375C16.2197 0.375 17.2822 0.430875 18.0375 0.542625V4.23225H15.8434C15.0434 4.23225 14.503 4.4 14.2222 4.7355C13.9415 5.071 13.8017 5.57413 13.803 6.24487V8.8875H17.898L17.3527 13.0238H13.8034V23.625H9.525Z"
+      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: 'MediaFacebook',
+})
+</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/MediaInstagram.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="M16.8085 0.75H7.19153C3.63393 0.75 0.75 3.63395 0.75 7.19153V16.8085C0.75 20.3661 3.63395 23.25 7.19153 23.25H16.8085C20.3661 23.25 23.25 20.3661 23.25 16.8085V7.19156C23.25 3.63395 20.3661 0.75 16.8085 0.75ZM12.0356 17.762C8.82335 17.762 6.21925 15.1579 6.21925 11.9458C6.21925 8.73348 8.82333 6.12941 12.0356 6.12941C15.2478 6.12941 17.8519 8.73346 17.8519 11.9458C17.8519 15.158 15.2478 17.762 12.0356 17.762ZM18.0031 7.29731C17.2516 7.29731 16.6424 6.68808 16.6424 5.93658C16.6424 5.18507 17.2517 4.57585 18.0031 4.57585C18.7546 4.57585 19.3639 5.18507 19.3639 5.93658C19.3639 6.68808 18.7546 7.29731 18.0031 7.29731ZM12.0356 8.21618C9.97587 8.21618 8.3061 9.88592 8.3061 11.9457C8.3061 14.0054 9.97584 15.6751 12.0356 15.6751C14.0953 15.6751 15.7651 14.0054 15.7651 11.9457C15.7651 9.88595 14.0954 8.21618 12.0356 8.21618Z"
+      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: 'MediaInstagram',
+})
+</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/MediaLinked.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="M5.64752 23.2165H0.821027V7.17547H5.64752V23.2165ZM23.2501 23.2165H18.4236V14.6991C18.4236 12.4988 17.6429 11.3632 16.0813 11.3632C14.8037 11.3632 14.023 12.002 13.6681 13.2086V23.2165H8.8416C8.8416 23.2165 8.91258 8.80797 8.8416 7.17547H12.8937L12.8873 10.3695H12.9583C13.952 8.73699 15.5135 7.67232 17.7138 7.67232C19.3463 7.67232 20.6949 8.09819 21.6886 9.30481C22.6823 10.4405 23.2501 12.002 23.2501 14.1313V23.2165ZM5.71845 3.20072C5.71845 4.54931 4.58281 5.61397 3.23423 5.61397C1.88565 5.61397 0.75 4.54931 0.75 3.20072C0.75 1.85214 1.88565 0.787476 3.23423 0.787476C4.58281 0.787476 5.71845 1.85214 5.71845 3.20072Z"
+      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: 'MediaLinked',
+})
+</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/MediaTwitter.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="M18.3263 2H21.6998L14.3297 10.4718L23 22H16.2112L10.894 15.0082L4.80995 22H1.43443L9.31743 12.9385L1 2H7.96111L12.7674 8.39077L18.3263 2ZM17.1423 19.9692H19.0116L6.94539 3.9241H4.93946L17.1423 19.9692Z"
+      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: 'MediaTwitter',
+})
+</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/MonoAdd.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="M11 11H3L3 13H11V21H13V13H21V11H13V3L11 3V11Z"
+      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: 'MonoAdd',
+})
+</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/MonoAddSubtract.vue

@@ -0,0 +1,68 @@
+<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 11L12 4L6 11H18Z" fill="currentColor" />
+    <path d="M18 13L12 20L6 13H18Z" 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: 'MonoAddSubtract',
+})
+</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>