fix(projects): fix build [unocss]: build failed to load icon "close", fixed #319

Author: honghuangdc

packages/materials/src/libs/page-tab/index.module.css

@@ -23,13 +23,13 @@
   background-color: var(--soy-primary-color-opacity2);
 }
 
-.button-tab .icon_close:hover {
+.button-tab .svg-close:hover {
   font-size: 12px;
   color: #ffffff;
   background-color: var(--soy-primary-color);
 }
 
-.button-tab_dark .icon_close:hover {
+.button-tab_dark .svg-close:hover {
   color: #000000;
 }
 
@@ -70,17 +70,17 @@
   color: var(--soy-primary-color2);
 }
 
-.chrome-tab .icon_close:hover {
+.chrome-tab .svg-close:hover {
   font-size: 12px;
   color: #ffffff;
   background-color: #9ca3af;
 }
 
-.chrome-tab_active .icon_close:hover {
+.chrome-tab_active .svg-close:hover {
   background-color: var(--soy-primary-color);
 }
 
-.chrome-tab_dark .icon_close:hover {
+.chrome-tab_dark .svg-close:hover {
   color: #000000;
 }
 

packages/materials/src/libs/page-tab/index.module.css.d.ts

@@ -3,13 +3,13 @@ declare const styles: {
   readonly 'button-tab_dark': string;
   readonly 'button-tab_active': string;
   readonly 'button-tab_active_dark': string;
-  readonly icon_close: string;
   readonly 'chrome-tab': string;
   readonly 'chrome-tab_active': string;
   readonly 'chrome-tab__bg': string;
   readonly 'chrome-tab_active_dark': string;
   readonly 'chrome-tab_dark': string;
   readonly 'chrome-tab-divider': string;
+  readonly 'svg-close': string;
 };
 
 export default styles;

packages/materials/src/libs/page-tab/index.vue

@@ -5,7 +5,7 @@ import type { PageTabMode, PageTabProps } from '../../types';
 import { ACTIVE_COLOR, createTabCssVars } from './shared';
 import ChromeTab from './chrome-tab.vue';
 import ButtonTab from './button-tab.vue';
-import SvgIconClose from './icon-close.vue';
+import SvgClose from './svg-close.vue';
 import style from './index.module.css';
 
 defineOptions({
@@ -88,7 +88,7 @@ function handleClose() {
     <slot></slot>
     <template #suffix>
       <slot name="suffix">
-        <SvgIconClose v-if="closable" :class="[style['icon_close']]" @click="handleClose" />
+        <SvgClose v-if="closable" :class="[style['svg-close']]" @click="handleClose" />
       </slot>
     </template>
   </component>

packages/materials/src/libs/page-tab/icon-close.vue renamed to packages/materials/src/libs/page-tab/svg-close.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'IconClose'
+  name: 'SvgClose'
 });
 
 const emit = defineEmits<Emits>();