@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/common/base/TuiSwitch.vue

@@ -1,14 +1,26 @@
 <template>
-  <div :class="[props.modelValue ? 'switch-container' : 'switch-container-active']" @click="toggleSwitch">
+  <div
+    :class="[
+      props.modelValue ? 'switch-container' : 'switch-container-active',
+      themeClass,
+    ]"
+    @click="toggleSwitch"
+  >
     <div class="switch-core"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { defineProps, defineEmits, computed } from 'vue';
 interface Props {
   modelValue: boolean;
+  theme?: 'white' | 'black';
 }
 
+const themeClass = computed(() =>
+  props.theme ? `tui-theme-${props.theme}` : ''
+);
+
 const props = defineProps<Props>();
 
 const emit = defineEmits(['update:modelValue']);
@@ -19,20 +31,25 @@ function toggleSwitch() {
 </script>
 
 <style lang="scss" scoped>
+.tui-theme-white.switch-container-active {
+  background-color: #bdbdbd;
+}
+
 .switch-container,
 .switch-container-active {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 20px;
+  cursor: pointer;
   background-color: var(--active-color-1);
   border-radius: 20px;
-  cursor: pointer;
   transition: background-color 0.3s;
+
   .switch-core {
     position: absolute;
-    left: 2px;
     top: 2px;
+    left: 2px;
     width: 40%;
     height: 80%;
     background-color: #fff;
@@ -45,6 +62,7 @@ function toggleSwitch() {
 
 .switch-container-active {
   background-color: var(--background-color-6);
+
   .switch-core {
     transform: translateX(0);
   }

package/src/TUIRoom/components/common/base/index.ts

@@ -1,4 +1,3 @@
-
 import TuiDialog from './Dialog/index.vue';
 import TuiMessage from './Message/index';
 import TuiMessageBox from './MessageBox';
@@ -7,12 +6,12 @@ import TuiBadge from './Badge.vue';
 import TuiButton from './Button.vue';
 import TuiDrawer from './Drawer.vue';
 import IconButton from './IconButton.vue';
-import TuiInput from './Input.vue';
-import TuiOption from './Option.vue';
-import TuiSelect from './Select.vue';
+import TuiInput from './Input/index.vue';
+import TuiOption from './Option/index.vue';
+import TuiSelect from './Select/index.vue';
 import SvgIcon from './SvgIcon.vue';
 import TuiSwitch from './TuiSwitch.vue';
-import TuiCheckbox from './Checkbox.vue';
+import TuiCheckbox from './Checkbox/index.vue';
 
 export {
   TuiDialog,

package/src/TUIRoom/components/common/icons/AllMembersShareScreenIcon.vue

@@ -0,0 +1,67 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="design-iconfont"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.66669 14.9998C1.66669 12.3681 3.69998 10.2112 6.28134 10.0145C6.40852 10.0048 6.53703 9.99985 6.66669 9.99985H10C10.1297 9.99985 10.2582 10.0048 10.3854 10.0145C12.9667 10.2112 15 12.3681 15 14.9998V18.3332H1.66669V14.9998ZM13.3334 14.9998V16.6665H3.33335V14.9998C3.33335 13.1589 4.82574 11.6665 6.66669 11.6665H10C11.841 11.6665 13.3334 13.1589 13.3334 14.9998Z"
+      fill="#4E5461"
+      style="
+        fill: #4e5461;
+        fill: color(display-p3 0.304 0.3284 0.38);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.66669 8.3602C6.64897 8.3514 6.63135 8.34246 6.61379 8.33339C5.40776 7.70998 4.58335 6.45126 4.58335 5C4.58335 2.92893 6.26229 1.25 8.33335 1.25C10.4044 1.25 12.0834 2.92893 12.0834 5C12.0834 6.45126 11.259 7.70998 10.0529 8.33339C10.0354 8.34246 10.0177 8.3514 10 8.3602C9.49795 8.60971 8.93204 8.75 8.33335 8.75C7.73467 8.75 7.16875 8.60971 6.66669 8.3602ZM10.4167 5C10.4167 6.15059 9.48395 7.08333 8.33335 7.08333C7.18276 7.08333 6.25002 6.15059 6.25002 5C6.25002 3.84941 7.18276 2.91667 8.33335 2.91667C9.48395 2.91667 10.4167 3.84941 10.4167 5Z"
+      fill="#4E5461"
+      style="
+        fill: #4e5461;
+        fill: color(display-p3 0.304 0.3284 0.38);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M12.5651 8.67685L13.2006 7.38123C13.5522 6.66449 13.7504 5.85772 13.7504 4.99992C13.7504 4.13294 13.5467 3.31354 13.1846 2.58695L14.6269 1.74561C15.1318 2.72004 15.417 3.82667 15.417 4.99992C15.417 6.11771 15.1581 7.17503 14.697 8.11518C16.8927 9.61592 18.3337 12.1396 18.3337 14.9999V18.3333L16.667 18.3333V14.9999C16.667 12.7132 15.5172 10.6946 13.7565 9.49115L12.5651 8.67685Z"
+      fill="#4E5461"
+      style="
+        fill: #4e5461;
+        fill: color(display-p3 0.304 0.3284 0.38);
+        fill-opacity: 1;
+      "
+    />
+    <defs>
+      <filter
+        id="filter0_b_10685_2618"
+        x="-4.99998"
+        y="-5.41667"
+        width="30.0003"
+        height="30.4166"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feGaussianBlur in="BackgroundImageFix" stdDeviation="3.33333" />
+        <feComposite
+          in2="SourceAlpha"
+          operator="in"
+          result="effect1_backgroundBlur_10685_2618"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_backgroundBlur_10685_2618"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ApplyActiveIcon.vue

@@ -1,8 +1,19 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="design-iconfont">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    class="design-iconfont"
+  >
     <g fill="none" fill-rule="evenodd">
-      <path d="M4,0 L28,0 C30.209139,-4.05812251e-16 32,1.790861 32,4 L32,28 C32,30.209139 30.209139,32 28,32 L7.95884232,32 L7.95884232,32 L4,32 C1.790861,32 2.705415e-16,30.209139 0,28 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" fill="#006EFF"/>
-      <path d="M26.4999959,10.0780055 C26.5007896,9.75418111 26.3722732,9.449585 26.1381666,9.22011315 C25.9041744,8.99067857 25.5926299,8.86409269 25.2609821,8.86372005 C24.5805967,8.86368279 24.0244552,9.40285591 24.0191147,10.0659692 C24.0158722,10.26876 24.0087006,12.6630851 24.0044282,14.0955514 C24.0030168,14.5672021 24.0019868,14.9161424 24.0016053,15.0117619 C24.0010331,15.1749038 23.8650018,15.3074519 23.6983387,15.3074519 C23.5301878,15.3069675 23.3945761,15.1736368 23.3950339,15.0102341 C23.4007177,12.9807982 23.4107885,9.87618351 23.4180745,7.6093013 L23.4206685,6.80093289 C23.4219273,6.47669864 23.2936017,6.17146904 23.0594569,5.94166182 C22.8253503,5.7118546 22.513577,5.5850824 22.181624,5.58467249 L22.1482074,5.58463523 C21.4652662,5.58463523 20.9087814,6.12630505 20.9062637,6.79213858 C20.9004654,8.2527019 20.8869996,12.4735231 20.8819642,14.0624609 L20.8816209,14.1657941 C20.881125,14.3286006 20.7451318,14.4610742 20.5784305,14.4610742 C20.4102797,14.4605897 20.274668,14.3273709 20.2750876,14.1640799 C20.2784827,12.7686914 20.2843954,11.0672162 20.2900793,9.42174877 C20.2940084,8.28527065 20.2978231,7.1764797 20.3006841,6.21588775 C20.3018285,5.89180256 20.1734647,5.58668475 19.9393962,5.3569148 C19.7052515,5.12714484 19.3935544,5.0004099 19.0616777,5 L19.0205936,5 C18.6883736,5 18.3771343,5.12569154 18.1429895,5.35393367 C17.908387,5.58254845 17.7790314,5.88669739 17.7786499,6.21037268 L17.7690751,14.1549502 C17.7688844,14.3181294 17.6328531,14.4508638 17.4658084,14.4508638 C17.3844796,14.4507893 17.3083768,14.4198974 17.2511567,14.3638523 C17.1939747,14.3078445 17.1625036,14.2334283 17.1626181,14.1542795 L17.1704,7.63605687 C17.1707433,7.31234432 17.0420362,7.00789726 16.8080441,6.7787608 C16.5740519,6.54962433 16.2626981,6.42322477 15.9313555,6.42285213 L15.9045765,6.42281486 C15.2199949,6.4227776 14.6638153,6.96575165 14.6630905,7.63326207 L14.6505021,18.2407266 C14.6503114,18.3729021 14.5592551,18.4900974 14.4289458,18.5257218 C14.4021668,18.5330256 14.3747011,18.5367147 14.3471973,18.5367147 C14.242103,18.5367147 14.1428452,18.4821975 14.088219,18.3944034 L11.1875784,13.7378913 C10.9224585,13.3122617 10.4598529,13.058121 9.95009788,13.0580838 C9.73830713,13.0580838 9.53296318,13.1025025 9.33982619,13.1901475 C9.18369155,13.2610236 9.04392186,13.3559351 8.92456068,13.4723106 C8.75579947,13.636794 8.63014408,13.8440192 8.56113661,14.0715534 C8.44139397,14.4664029 8.49872853,14.8760463 8.72264994,15.2249866 L8.96465292,15.6022848 C10.1676869,17.4775222 11.1440911,19.5839828 11.8667813,21.8631248 C12.3281662,23.3184712 13.2733663,24.6260284 14.5281655,25.5449219 C15.8254983,26.4949682 17.370823,26.9981443 18.9970952,27 L19.0060597,27 C20.9985407,27 22.8727286,26.2428771 24.2833191,24.8681701 C25.7002801,23.4853768 26.4784737,21.6509808 26.4781686,19.6993522 L26.4777489,17.3388255 L26.4999959,10.0780055 Z" fill="#FFF" transform="matrix(-1 0 0 1 34.999992 0)"/>
+      <path
+        d="M4,0 L28,0 C30.209139,-4.05812251e-16 32,1.790861 32,4 L32,28 C32,30.209139 30.209139,32 28,32 L7.95884232,32 L7.95884232,32 L4,32 C1.790861,32 2.705415e-16,30.209139 0,28 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z"
+        fill="#006EFF"
+      />
+      <path
+        d="M26.4999959,10.0780055 C26.5007896,9.75418111 26.3722732,9.449585 26.1381666,9.22011315 C25.9041744,8.99067857 25.5926299,8.86409269 25.2609821,8.86372005 C24.5805967,8.86368279 24.0244552,9.40285591 24.0191147,10.0659692 C24.0158722,10.26876 24.0087006,12.6630851 24.0044282,14.0955514 C24.0030168,14.5672021 24.0019868,14.9161424 24.0016053,15.0117619 C24.0010331,15.1749038 23.8650018,15.3074519 23.6983387,15.3074519 C23.5301878,15.3069675 23.3945761,15.1736368 23.3950339,15.0102341 C23.4007177,12.9807982 23.4107885,9.87618351 23.4180745,7.6093013 L23.4206685,6.80093289 C23.4219273,6.47669864 23.2936017,6.17146904 23.0594569,5.94166182 C22.8253503,5.7118546 22.513577,5.5850824 22.181624,5.58467249 L22.1482074,5.58463523 C21.4652662,5.58463523 20.9087814,6.12630505 20.9062637,6.79213858 C20.9004654,8.2527019 20.8869996,12.4735231 20.8819642,14.0624609 L20.8816209,14.1657941 C20.881125,14.3286006 20.7451318,14.4610742 20.5784305,14.4610742 C20.4102797,14.4605897 20.274668,14.3273709 20.2750876,14.1640799 C20.2784827,12.7686914 20.2843954,11.0672162 20.2900793,9.42174877 C20.2940084,8.28527065 20.2978231,7.1764797 20.3006841,6.21588775 C20.3018285,5.89180256 20.1734647,5.58668475 19.9393962,5.3569148 C19.7052515,5.12714484 19.3935544,5.0004099 19.0616777,5 L19.0205936,5 C18.6883736,5 18.3771343,5.12569154 18.1429895,5.35393367 C17.908387,5.58254845 17.7790314,5.88669739 17.7786499,6.21037268 L17.7690751,14.1549502 C17.7688844,14.3181294 17.6328531,14.4508638 17.4658084,14.4508638 C17.3844796,14.4507893 17.3083768,14.4198974 17.2511567,14.3638523 C17.1939747,14.3078445 17.1625036,14.2334283 17.1626181,14.1542795 L17.1704,7.63605687 C17.1707433,7.31234432 17.0420362,7.00789726 16.8080441,6.7787608 C16.5740519,6.54962433 16.2626981,6.42322477 15.9313555,6.42285213 L15.9045765,6.42281486 C15.2199949,6.4227776 14.6638153,6.96575165 14.6630905,7.63326207 L14.6505021,18.2407266 C14.6503114,18.3729021 14.5592551,18.4900974 14.4289458,18.5257218 C14.4021668,18.5330256 14.3747011,18.5367147 14.3471973,18.5367147 C14.242103,18.5367147 14.1428452,18.4821975 14.088219,18.3944034 L11.1875784,13.7378913 C10.9224585,13.3122617 10.4598529,13.058121 9.95009788,13.0580838 C9.73830713,13.0580838 9.53296318,13.1025025 9.33982619,13.1901475 C9.18369155,13.2610236 9.04392186,13.3559351 8.92456068,13.4723106 C8.75579947,13.636794 8.63014408,13.8440192 8.56113661,14.0715534 C8.44139397,14.4664029 8.49872853,14.8760463 8.72264994,15.2249866 L8.96465292,15.6022848 C10.1676869,17.4775222 11.1440911,19.5839828 11.8667813,21.8631248 C12.3281662,23.3184712 13.2733663,24.6260284 14.5281655,25.5449219 C15.8254983,26.4949682 17.370823,26.9981443 18.9970952,27 L19.0060597,27 C20.9985407,27 22.8727286,26.2428771 24.2833191,24.8681701 C25.7002801,23.4853768 26.4784737,21.6509808 26.4781686,19.6993522 L26.4777489,17.3388255 L26.4999959,10.0780055 Z"
+        fill="#FFF"
+        transform="matrix(-1 0 0 1 34.999992 0)"
+      />
     </g>
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ApplyLittleIcon.vue

@@ -1,13 +1,24 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 32 32" class="design-iconfont">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="26"
+    height="26"
+    viewBox="0 0 32 32"
+    class="design-iconfont"
+  >
     <defs>
-      <path id="t3ru7xlifa" d="M0 0L20 0 20 24 0 24z"/>
+      <path id="t3ru7xlifa" d="M0 0L20 0 20 24 0 24z" />
     </defs>
     <g transform="translate(7.5 4)" fill="none" fill-rule="evenodd">
       <mask id="5ue0x9043b" fill="#fff">
-        <use xlink:href="#t3ru7xlifa"/>
+        <use xlink:href="#t3ru7xlifa" />
       </mask>
-      <path d="M2.0462767,6.22817971 C2.0462767,6.10483933 2.09492364,5.98965368 2.18290215,5.90300961 C2.27191571,5.81636554 2.38887538,5.76845646 2.51411538,5.76845646 C2.76977058,5.76845646 2.97884893,5.97334421 2.98091901,6.22614103 L2.99230447,11.0343773 C2.99230447,11.3034836 3.09891372,11.5572998 3.29143141,11.7448587 C3.48498414,11.9354757 3.74167439,12.0404679 4.01389025,12.0404679 L4.01699538,12.0404679 C4.58005786,12.0394485 5.03858117,11.5868607 5.03858117,11.0313193 L5.02305555,3.04171657 C5.02305555,2.91837619 5.07170249,2.8021712 5.15864596,2.71552713 C5.24765951,2.62888306 5.36461918,2.58097398 5.52194546,2.58097398 C5.77863571,2.58097398 5.9887491,2.78688107 5.98978414,3.03967789 L6.00427472,10.2158457 C6.00530976,10.4839326 6.11295406,10.7357101 6.3044367,10.9253077 C6.50005951,11.116944 6.7526096,11.2637293 7.03000067,11.2198976 C7.59409819,11.2188782 8.0526215,10.7662904 8.05055142,10.210749 L8.0350258,2.47496241 C8.0350258,2.35264137 8.08367274,2.23643638 8.17165125,2.14979231 C8.32690745,1.99689101 8.66640101,1.94796259 8.87237423,2.14979231 C8.96035274,2.23643638 9.01003473,2.35264137 9.01003473,2.47496241 L9.01003473,10.2056523 C9.01003473,10.7611936 9.46855803,11.2137815 10.0326556,11.2137815 C10.5967531,11.2137815 11.0552764,10.7611936 11.0552764,10.2056523 L11.0552764,3.86330624 C11.0552764,3.73996585 11.1039233,3.6247802 11.1919018,3.53813613 C11.2809154,3.45047272 11.3978751,3.40358299 11.5489911,3.40358299 C11.8056813,3.40358299 12.0147597,3.60949007 12.0147597,3.86330624 L12.0147597,14.2014729 C12.0354605,14.6846411 12.3304473,15.0516042 12.7827604,15.1586351 C13.2381785,15.268724 13.701877,15.0770877 13.9109554,14.7101246 L16.7169524,10.1822074 C16.8939445,9.89577228 17.2593141,9.78772203 17.5677564,9.92839122 C17.7468185,10.0109579 17.8710235,10.1526465 17.9269157,10.3391861 C17.9817729,10.5216483 17.9547569,10.7122652 17.8523928,10.8743406 L17.6184734,11.2413037 C16.4209306,13.116893 15.4490268,15.2228536 14.7307081,17.5000637 C14.328077,18.7722025 13.5062542,19.9148849 12.4173908,20.7181264 C11.2912658,21.5468515 9.94985225,21.9861879 8.53909092,21.9861879 C6.80953687,21.9861879 5.18038183,21.3215769 3.95282282,20.1126373 C2.72733389,18.904717 2.05559207,17.3002727 2.05662711,15.5928748 L2.05973223,13.2962972 L2.0462767,6.22817971 Z M19.8893541,9.76937387 C19.6699253,9.03340893 19.1399842,8.42588109 18.4320159,8.10173033 C17.1785809,7.52580209 15.6912265,7.96921587 14.9687676,9.13330445 L14.0600013,10.5991183 L14.0600013,3.86330624 C14.0600013,2.49840728 12.9338764,1.38732448 11.521045,1.38732448 C11.2891957,1.38732448 11.0625217,1.41790474 10.8430929,1.47906526 C10.7178529,1.19874621 10.5408608,0.941872022 10.318327,0.724752172 C9.84324299,0.256874188 9.21290283,0 8.50182944,0 C7.83008762,0 7.19871241,0.25789353 6.72466348,0.726790857 C6.6925772,0.757371117 6.662561,0.788970719 6.63357985,0.820570322 C5.72688365,0.380214571 4.47965885,0.534135216 3.70958811,1.29252567 C3.23553918,1.76040366 2.97470877,2.38322163 2.97677885,3.04579394 L2.97781389,3.79501032 C2.1715167,3.64720573 1.32174777,3.90102189 0.735914381,4.47898881 C0.260830414,4.94584746 0,5.56866543 0,6.23021839 L0.0134555372,13.2962972 L0.0103504132,15.5908361 C0.00828033059,17.8364466 0.894275704,19.9485232 2.50894017,21.5397161 C4.11946447,23.1268316 6.26096497,24.0004077 8.53909092,24.0004077 C10.39492,24.0004077 12.1596655,23.4234602 13.6428797,22.3317449 C15.0753769,21.2767259 16.15596,19.7731964 16.6848661,18.0994368 C17.3493627,15.9904182 18.2467435,14.0444943 19.3500976,12.3146709 L19.5840169,11.9466884 C19.9990685,11.2983869 20.1098179,10.5033001 19.8893541,9.76937387 L19.8893541,9.76937387 Z" fill="#ADB6CC" mask="url(#5ue0x9043b)"/>
+      <path
+        d="M2.0462767,6.22817971 C2.0462767,6.10483933 2.09492364,5.98965368 2.18290215,5.90300961 C2.27191571,5.81636554 2.38887538,5.76845646 2.51411538,5.76845646 C2.76977058,5.76845646 2.97884893,5.97334421 2.98091901,6.22614103 L2.99230447,11.0343773 C2.99230447,11.3034836 3.09891372,11.5572998 3.29143141,11.7448587 C3.48498414,11.9354757 3.74167439,12.0404679 4.01389025,12.0404679 L4.01699538,12.0404679 C4.58005786,12.0394485 5.03858117,11.5868607 5.03858117,11.0313193 L5.02305555,3.04171657 C5.02305555,2.91837619 5.07170249,2.8021712 5.15864596,2.71552713 C5.24765951,2.62888306 5.36461918,2.58097398 5.52194546,2.58097398 C5.77863571,2.58097398 5.9887491,2.78688107 5.98978414,3.03967789 L6.00427472,10.2158457 C6.00530976,10.4839326 6.11295406,10.7357101 6.3044367,10.9253077 C6.50005951,11.116944 6.7526096,11.2637293 7.03000067,11.2198976 C7.59409819,11.2188782 8.0526215,10.7662904 8.05055142,10.210749 L8.0350258,2.47496241 C8.0350258,2.35264137 8.08367274,2.23643638 8.17165125,2.14979231 C8.32690745,1.99689101 8.66640101,1.94796259 8.87237423,2.14979231 C8.96035274,2.23643638 9.01003473,2.35264137 9.01003473,2.47496241 L9.01003473,10.2056523 C9.01003473,10.7611936 9.46855803,11.2137815 10.0326556,11.2137815 C10.5967531,11.2137815 11.0552764,10.7611936 11.0552764,10.2056523 L11.0552764,3.86330624 C11.0552764,3.73996585 11.1039233,3.6247802 11.1919018,3.53813613 C11.2809154,3.45047272 11.3978751,3.40358299 11.5489911,3.40358299 C11.8056813,3.40358299 12.0147597,3.60949007 12.0147597,3.86330624 L12.0147597,14.2014729 C12.0354605,14.6846411 12.3304473,15.0516042 12.7827604,15.1586351 C13.2381785,15.268724 13.701877,15.0770877 13.9109554,14.7101246 L16.7169524,10.1822074 C16.8939445,9.89577228 17.2593141,9.78772203 17.5677564,9.92839122 C17.7468185,10.0109579 17.8710235,10.1526465 17.9269157,10.3391861 C17.9817729,10.5216483 17.9547569,10.7122652 17.8523928,10.8743406 L17.6184734,11.2413037 C16.4209306,13.116893 15.4490268,15.2228536 14.7307081,17.5000637 C14.328077,18.7722025 13.5062542,19.9148849 12.4173908,20.7181264 C11.2912658,21.5468515 9.94985225,21.9861879 8.53909092,21.9861879 C6.80953687,21.9861879 5.18038183,21.3215769 3.95282282,20.1126373 C2.72733389,18.904717 2.05559207,17.3002727 2.05662711,15.5928748 L2.05973223,13.2962972 L2.0462767,6.22817971 Z M19.8893541,9.76937387 C19.6699253,9.03340893 19.1399842,8.42588109 18.4320159,8.10173033 C17.1785809,7.52580209 15.6912265,7.96921587 14.9687676,9.13330445 L14.0600013,10.5991183 L14.0600013,3.86330624 C14.0600013,2.49840728 12.9338764,1.38732448 11.521045,1.38732448 C11.2891957,1.38732448 11.0625217,1.41790474 10.8430929,1.47906526 C10.7178529,1.19874621 10.5408608,0.941872022 10.318327,0.724752172 C9.84324299,0.256874188 9.21290283,0 8.50182944,0 C7.83008762,0 7.19871241,0.25789353 6.72466348,0.726790857 C6.6925772,0.757371117 6.662561,0.788970719 6.63357985,0.820570322 C5.72688365,0.380214571 4.47965885,0.534135216 3.70958811,1.29252567 C3.23553918,1.76040366 2.97470877,2.38322163 2.97677885,3.04579394 L2.97781389,3.79501032 C2.1715167,3.64720573 1.32174777,3.90102189 0.735914381,4.47898881 C0.260830414,4.94584746 0,5.56866543 0,6.23021839 L0.0134555372,13.2962972 L0.0103504132,15.5908361 C0.00828033059,17.8364466 0.894275704,19.9485232 2.50894017,21.5397161 C4.11946447,23.1268316 6.26096497,24.0004077 8.53909092,24.0004077 C10.39492,24.0004077 12.1596655,23.4234602 13.6428797,22.3317449 C15.0753769,21.2767259 16.15596,19.7731964 16.6848661,18.0994368 C17.3493627,15.9904182 18.2467435,14.0444943 19.3500976,12.3146709 L19.5840169,11.9466884 C19.9990685,11.2983869 20.1098179,10.5033001 19.8893541,9.76937387 L19.8893541,9.76937387 Z"
+        fill="#ADB6CC"
+        mask="url(#5ue0x9043b)"
+      />
     </g>
   </svg>
-</template>
+</template>

package/src/TUIRoom/components/common/icons/ApplyManageIcon.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="25"
+    height="24"
+    viewBox="0 0 25 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="&#229;&#136;&#151;&#232;&#161;&#168;-list 1">
       <path
         id="Vector"
@@ -22,7 +28,13 @@
         d="M2.42383 20.0039H4.42774V18H2.42383V20.0039Z"
         fill="currentColor"
       />
-      <path id="Vector_4" fill-rule="evenodd" clip-rule="evenodd" d="M7.42383 4H22.4238V6H7.42383V4Z" fill="currentColor" />
+      <path
+        id="Vector_4"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.42383 4H22.4238V6H7.42383V4Z"
+        fill="currentColor"
+      />
       <path
         id="Vector_5"
         fill-rule="evenodd"

package/src/TUIRoom/components/common/icons/ApplyStageIcon.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Group 7805">
       <g id="Union">
         <mask id="path-1-inside-1_6891_44097" fill="white">

package/src/TUIRoom/components/common/icons/ApplyStageLabelIcon.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Frame">
       <path
         id="Vector"
@@ -27,7 +33,14 @@
       />
     </g>
     <defs>
-      <linearGradient id="paint0_linear_5456_14610" x1="24" y1="4" x2="24" y2="38" gradientUnits="userSpaceOnUse">
+      <linearGradient
+        id="paint0_linear_5456_14610"
+        x1="24"
+        y1="4"
+        x2="24"
+        y2="38"
+        gradientUnits="userSpaceOnUse"
+      >
         <stop stop-color="#D5E0F2" />
         <stop offset="1" stop-color="#D5E0F2" stop-opacity="0" />
       </linearGradient>

package/src/TUIRoom/components/common/icons/ApplyTipsIcon.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Frame">
       <path
         id="Vector"
@@ -16,9 +22,27 @@
         stroke-width="1.5"
         stroke-linejoin="round"
       />
-      <path id="Vector_3" d="M14.4004 14.3999H9.60039" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-      <path id="Vector_4" d="M3 9V15" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
-      <path id="Vector_5" d="M21 9V15" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+      <path
+        id="Vector_3"
+        d="M14.4004 14.3999H9.60039"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_4"
+        d="M3 9V15"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_5"
+        d="M21 9V15"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+      />
     </g>
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ArrowDown.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="28"
+    height="7"
+    viewBox="0 0 28 7"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 2L11.0896 4.27239C13.0005 4.75011 14.9995 4.75011 16.9104 4.27239L26 2"
+      stroke="currentColor"
+      stroke-width="3"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ArrowStrokeBackIcon.vue

@@ -1,5 +1,14 @@
 <template>
-  <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M3.4518 10.0005L10.9273 2.77423C11.3679 2.34759 11.3679 1.6571 10.9273 1.23182C10.4867 0.805863 9.77185 0.805863 9.33127 1.23182L1.05846 9.22943C0.618535 9.65539 0.618535 10.3462 1.05846 10.7709L9.33127 18.7681C9.55225 18.9811 9.84106 19.0876 10.1299 19.0876C10.4188 19.0876 10.7076 18.9811 10.9273 18.7674C11.3679 18.3415 11.3679 17.652 10.9273 17.226L3.4518 10.0005Z" fill="currentColor"/>
+  <svg
+    width="12"
+    height="20"
+    viewBox="0 0 12 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.4518 10.0005L10.9273 2.77423C11.3679 2.34759 11.3679 1.6571 10.9273 1.23182C10.4867 0.805863 9.77185 0.805863 9.33127 1.23182L1.05846 9.22943C0.618535 9.65539 0.618535 10.3462 1.05846 10.7709L9.33127 18.7681C9.55225 18.9811 9.84106 19.0876 10.1299 19.0876C10.4188 19.0876 10.7076 18.9811 10.9273 18.7674C11.3679 18.3415 11.3679 17.652 10.9273 17.226L3.4518 10.0005Z"
+      fill="currentColor"
+    />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ArrowStrokeLeftIcon.vue

@@ -1,5 +1,16 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.78516 0.932617L3.5621 6.00028L7.78516 11.0679L4.43791 11.0679L0.900766 6.82337L0.214854 6.00028L0.900766 5.17718L4.43791 0.932617L7.78516 0.932617Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="8"
+    height="12"
+    viewBox="0 0 8 12"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.78516 0.932617L3.5621 6.00028L7.78516 11.0679L4.43791 11.0679L0.900766 6.82337L0.214854 6.00028L0.900766 5.17718L4.43791 0.932617L7.78516 0.932617Z"
+      fill="currentColor"
+    />
   </svg>
-</template>
+</template>

package/src/TUIRoom/components/common/icons/ArrowStrokeRightIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Group 7815">
+      <path
+        id="Union"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.3935 8L8.64345 3.5H10.8564L14.1529 7.45584L14.6064 8L14.1529 8.54416L10.8564 12.5H8.64345L12.3935 8ZM8 7.15H1V8.85H8V7.15Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/ArrowStrokeSelectDownIcon.vue

@@ -1,5 +1,16 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.86287 4.735C1.74876 4.61488 1.75363 4.42499 1.87375 4.31087L2.52625 3.691C2.64637 3.57688 2.83626 3.58175 2.95037 3.70188L5.99999 6.91199L9.04942 3.70189C9.16354 3.58177 9.35342 3.5769 9.47355 3.69101L10.1261 4.31087C10.2462 4.42498 10.2511 4.61487 10.1369 4.73499L6.36251 8.70828C6.16539 8.91579 5.83463 8.9158 5.6375 8.70829L1.86287 4.735Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.86287 4.735C1.74876 4.61488 1.75363 4.42499 1.87375 4.31087L2.52625 3.691C2.64637 3.57688 2.83626 3.58175 2.95037 3.70188L5.99999 6.91199L9.04942 3.70189C9.16354 3.58177 9.35342 3.5769 9.47355 3.69101L10.1261 4.31087C10.2462 4.42498 10.2511 4.61487 10.1369 4.73499L6.36251 8.70828C6.16539 8.91579 5.83463 8.9158 5.6375 8.70829L1.86287 4.735Z"
+      fill="currentColor"
+    />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ArrowStrokeTurnPageIcon.vue

@@ -1,5 +1,16 @@
 <template>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.667 3L7.54178 10L13.667 17H11.0094L5.46042 10.6585L4.8842 10L5.46042 9.34148L11.0094 3H13.667Z" fill="currentColor"/>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.667 3L7.54178 10L13.667 17H11.0094L5.46042 10.6585L4.8842 10L5.46042 9.34148L11.0094 3H13.667Z"
+      fill="currentColor"
+    />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ArrowStrokeUpIcon.vue

@@ -1,7 +1,23 @@
 <template>
-  <svg width="15" height="20" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="15"
+    height="20"
+    viewBox="0 0 17 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M8.4707 4V14" stroke="currentColor" stroke-width="1.5" />
-    <path d="M8.4707 3L3.4707 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" />
-    <path d="M13.4707 8L8.4707 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" />
+    <path
+      d="M8.4707 3L3.4707 8"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <path
+      d="M13.4707 8L8.4707 3"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ArrowUpIcon.vue

@@ -1,5 +1,14 @@
 <template>
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1.56473 8.20938L5.59313 2.56961C5.79254 2.29044 6.20746 2.29044 6.40687 2.56961L10.4353 8.20938C10.6717 8.54032 10.4351 9 10.0284 9H1.97159C1.56491 9 1.32835 8.54032 1.56473 8.20938Z" fill="currentColor"/>
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.56473 8.20938L5.59313 2.56961C5.79254 2.29044 6.20746 2.29044 6.40687 2.56961L10.4353 8.20938C10.6717 8.54032 10.4351 9 10.0284 9H1.97159C1.56491 9 1.32835 8.54032 1.56473 8.20938Z"
+      fill="currentColor"
+    />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/AudioCloseIcon.vue

@@ -1,6 +1,28 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.32448 17.3825C7.93362 17.603 8.57784 17.7502 9.24648 17.8136V19.9996H10.9465V17.7921C14.8339 17.3231 17.8465 14.0129 17.8465 9.99897V9.16564H16.1465V9.99897C16.1465 13.3955 13.393 16.149 9.99648 16.149C9.36855 16.149 8.7626 16.0549 8.19196 15.88L7.32448 17.3825ZM9.0467 14.3995C9.35288 14.4653 9.67064 14.4999 9.99648 14.4999C12.4818 14.4999 14.4965 12.4852 14.4965 9.99994V5C14.4965 4.98684 14.4964 4.97368 14.4963 4.96055L12.7965 7.90473V9.99994C12.7965 11.5463 11.5429 12.7999 9.99648 12.7999C9.98774 12.7999 9.97901 12.7999 9.97029 12.7998L9.0467 14.3995ZM7.19828 10.1011L6.0293 12.1258C5.68933 11.4927 5.49648 10.7689 5.49648 9.99995V5C5.49648 2.51472 7.5112 0.5 9.99648 0.5C10.8618 0.5 11.6701 0.744232 12.3561 1.16752L11.5054 2.64096C11.0699 2.36184 10.5521 2.2 9.99648 2.2C8.45009 2.2 7.19648 3.4536 7.19648 5V9.99995C7.19648 10.0338 7.19709 10.0675 7.19828 10.1011ZM5.10485 13.727L4.20053 15.2933C2.92473 13.8974 2.14648 12.0391 2.14648 9.99897V9.16564H3.84648V9.99897C3.84648 11.4006 4.31537 12.6927 5.10485 13.727Z" fill="currentColor" />
-  <path d="M5.5 16.7939L14.5 1.20555" stroke="#ED414D" style="stroke:#ED414D;stroke:color(display-p3 0.9292 0.2555 0.3004);stroke-opacity:1;" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.32448 17.3825C7.93362 17.603 8.57784 17.7502 9.24648 17.8136V19.9996H10.9465V17.7921C14.8339 17.3231 17.8465 14.0129 17.8465 9.99897V9.16564H16.1465V9.99897C16.1465 13.3955 13.393 16.149 9.99648 16.149C9.36855 16.149 8.7626 16.0549 8.19196 15.88L7.32448 17.3825ZM9.0467 14.3995C9.35288 14.4653 9.67064 14.4999 9.99648 14.4999C12.4818 14.4999 14.4965 12.4852 14.4965 9.99994V5C14.4965 4.98684 14.4964 4.97368 14.4963 4.96055L12.7965 7.90473V9.99994C12.7965 11.5463 11.5429 12.7999 9.99648 12.7999C9.98774 12.7999 9.97901 12.7999 9.97029 12.7998L9.0467 14.3995ZM7.19828 10.1011L6.0293 12.1258C5.68933 11.4927 5.49648 10.7689 5.49648 9.99995V5C5.49648 2.51472 7.5112 0.5 9.99648 0.5C10.8618 0.5 11.6701 0.744232 12.3561 1.16752L11.5054 2.64096C11.0699 2.36184 10.5521 2.2 9.99648 2.2C8.45009 2.2 7.19648 3.4536 7.19648 5V9.99995C7.19648 10.0338 7.19709 10.0675 7.19828 10.1011ZM5.10485 13.727L4.20053 15.2933C2.92473 13.8974 2.14648 12.0391 2.14648 9.99897V9.16564H3.84648V9.99897C3.84648 11.4006 4.31537 12.6927 5.10485 13.727Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5.5 16.7939L14.5 1.20555"
+      stroke="#ED414D"
+      style="
+        stroke: #ed414d;
+        stroke: color(display-p3 0.9292 0.2555 0.3004);
+        stroke-opacity: 1;
+      "
+      stroke-width="1.7"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
   </svg>
-</template>
+</template>

package/src/TUIRoom/components/common/icons/AudioOpenIcon.vue

@@ -1,5 +1,16 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7965 5.00098V10.0009C12.7965 11.5473 11.5429 12.8009 9.99648 12.8009C8.45009 12.8009 7.19648 11.5473 7.19648 10.0009V5.00098C7.19648 3.45458 8.45009 2.20098 9.99648 2.20098C11.5429 2.20098 12.7965 3.45458 12.7965 5.00098ZM5.49648 5.00098C5.49648 2.5157 7.5112 0.500977 9.99648 0.500977C12.4818 0.500977 14.4965 2.5157 14.4965 5.00098V10.0009C14.4965 12.4862 12.4818 14.5009 9.99648 14.5009C7.5112 14.5009 5.49648 12.4862 5.49648 10.0009V5.00098ZM2.14648 9.16564V9.99897C2.14648 14.0814 5.26287 17.436 9.24648 17.8136V19.9996H10.9465V17.7921C14.8339 17.3231 17.8465 14.0129 17.8465 9.99897V9.16564H16.1465V9.99897C16.1465 13.3955 13.393 16.149 9.99648 16.149C6.59993 16.149 3.84648 13.3955 3.84648 9.99897V9.16564H2.14648Z" fill="currentColor" />
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.7965 5.00098V10.0009C12.7965 11.5473 11.5429 12.8009 9.99648 12.8009C8.45009 12.8009 7.19648 11.5473 7.19648 10.0009V5.00098C7.19648 3.45458 8.45009 2.20098 9.99648 2.20098C11.5429 2.20098 12.7965 3.45458 12.7965 5.00098ZM5.49648 5.00098C5.49648 2.5157 7.5112 0.500977 9.99648 0.500977C12.4818 0.500977 14.4965 2.5157 14.4965 5.00098V10.0009C14.4965 12.4862 12.4818 14.5009 9.99648 14.5009C7.5112 14.5009 5.49648 12.4862 5.49648 10.0009V5.00098ZM2.14648 9.16564V9.99897C2.14648 14.0814 5.26287 17.436 9.24648 17.8136V19.9996H10.9465V17.7921C14.8339 17.3231 17.8465 14.0129 17.8465 9.99897V9.16564H16.1465V9.99897C16.1465 13.3955 13.393 16.149 9.99648 16.149C6.59993 16.149 3.84648 13.3955 3.84648 9.99897V9.16564H2.14648Z"
+      fill="currentColor"
+    />
   </svg>
-</template>
+</template>

package/src/TUIRoom/components/common/icons/CalendarIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10 3H6L6 1.5H5L5 3H3C2.44772 3 2 3.44771 2 4V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V4C14 3.44772 13.5523 3 13 3H11V1.5H10L10 3ZM5 5L6 5L6 4H10L10 5L11 5V4H13V6H3V4H5L5 5ZM3 7H13V13H3L3 7Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/TUIRoom/components/common/icons/CameraOffIcon.vue

@@ -1,7 +1,33 @@
 <template>
-  <svg 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="M6.95377 20H16C16.5523 20 17 19.5523 17 19V16.293L21.3779 18.336C22.0409 18.6454 22.8008 18.1614 22.8008 17.4298V6.5702C22.8008 5.83858 22.0409 5.35462 21.3779 5.66401L17.258 7.58664L15.3 9.9454V18.3H8.36493L6.95377 20ZM13.9504 5.7H2.7V18.3H3.4913L2.08014 20H2C1.44772 20 1 19.5523 1 19V5C1 4.44772 1.44772 4 2 4H15.3616L13.9504 5.7ZM17.0008 9.58267L21.1008 7.66933V16.3307L17.0008 14.4173V9.58267Z" fill="currentColor"/>
-  <path d="M4.14339 20.6077L17.5022 4.47709" stroke="#ED414D" style="stroke:#ED414D;stroke:color(display-p3 0.9292 0.2555 0.3004);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M5 9H8.5" style="stroke:var(--active-color-2);stroke-opacity:1;" stroke-width="1.7"/>
+  <svg
+    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="M6.95377 20H16C16.5523 20 17 19.5523 17 19V16.293L21.3779 18.336C22.0409 18.6454 22.8008 18.1614 22.8008 17.4298V6.5702C22.8008 5.83858 22.0409 5.35462 21.3779 5.66401L17.258 7.58664L15.3 9.9454V18.3H8.36493L6.95377 20ZM13.9504 5.7H2.7V18.3H3.4913L2.08014 20H2C1.44772 20 1 19.5523 1 19V5C1 4.44772 1.44772 4 2 4H15.3616L13.9504 5.7ZM17.0008 9.58267L21.1008 7.66933V16.3307L17.0008 14.4173V9.58267Z"
+      fill="currentColor"
+    />
+    <path
+      d="M4.14339 20.6077L17.5022 4.47709"
+      stroke="#ED414D"
+      style="
+        stroke: #ed414d;
+        stroke: color(display-p3 0.9292 0.2555 0.3004);
+        stroke-opacity: 1;
+      "
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5 9H8.5"
+      style="stroke: var(--active-color-2); stroke-opacity: 1"
+      stroke-width="1.7"
+    />
   </svg>
 </template>