fix: rename the Icon component to IconifyIcon to prevent name conflicts and fix type issues (#4704)

packages/@core/base/design/src/design-tokens/dark.css

@@ -58,7 +58,7 @@
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
   --accent: 216 5% 19%;
-  --accent-lighter: 216 5% 11%;
+  --accent-lighter: 216 5% 12%;
   --accent-hover: 216 5% 24%;
   --accent-foreground: 0 0% 98%;
 

packages/@core/base/icons/src/index.ts

@@ -2,4 +2,6 @@ export { default as EmptyIcon } from './components/empty.vue';
 export * from './create-icon';
 
 export * from './lucide';
-export * from '@iconify/vue';
+
+export type { IconifyIcon as IconifyIconStructure } from '@iconify/vue';
+export { addCollection, addIcon, Icon as IconifyIcon } from '@iconify/vue';

packages/@core/base/shared/src/color/color.ts

@@ -0,0 +1,9 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+export function isDarkColor(color: string) {
+  return new TinyColor(color).isDark();
+}
+
+export function isLightColor(color: string) {
+  return new TinyColor(color).isLight();
+}

packages/@core/base/shared/src/color/index.ts

@@ -1,2 +1,3 @@
+export * from './color';
 export * from './convert';
 export * from './generator';

packages/@core/ui-kit/form-ui/src/types.ts

@@ -289,6 +289,7 @@ export interface FormRenderProps<
 }
 
 export interface ActionButtonOptions extends VbenButtonProps {
+  [key: string]: any;
   content?: string;
   show?: boolean;
 }

packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type Component, computed } from 'vue';
 
-import { Icon, IconDefault } from '@vben-core/icons';
+import { IconDefault, IconifyIcon } from '@vben-core/icons';
 import {
   isFunction,
   isHttpUrl,
@@ -28,6 +28,6 @@ const isComponent = computed(() => {
 <template>
   <component :is="icon as Component" v-if="isComponent" v-bind="$attrs" />
   <img v-else-if="isRemoteIcon" :src="icon as string" v-bind="$attrs" />
-  <Icon v-else-if="icon" v-bind="$attrs" :icon="icon as string" />
+  <IconifyIcon v-else-if="icon" v-bind="$attrs" :icon="icon as string" />
   <IconDefault v-else-if="fallback" v-bind="$attrs" />
 </template>

packages/effects/hooks/src/use-design-tokens.ts

@@ -217,12 +217,13 @@ export function useElementPlusDesignTokens() {
 
         '--el-color-info-light-8': border,
         '--el-color-info-light-9': getCssVariableValue('--info'), // getCssVariableValue('--secondary'),
-
         '--el-color-primary': getCssVariableValue('--primary-500'),
         '--el-color-primary-dark-2': getCssVariableValue('--primary'),
         '--el-color-primary-light-3': getCssVariableValue('--primary-400'),
         '--el-color-primary-light-5': getCssVariableValue('--primary-300'),
-        '--el-color-primary-light-7': getCssVariableValue('--primary-200'),
+        '--el-color-primary-light-7': isDark.value
+          ? border
+          : getCssVariableValue('--primary-200'),
         '--el-color-primary-light-8': isDark.value
           ? border
           : getCssVariableValue('--primary-100'),
@@ -268,6 +269,7 @@ export function useElementPlusDesignTokens() {
 
         '--el-text-color-regular': getCssVariableValue('--foreground'),
       };
+
       updateCSSVariables(variables, `__vben_design_styles__`);
     },
     { immediate: true },

packages/icons/src/index.ts

@@ -1,2 +1,2 @@
-export * from './iconify/index';
-export * from './svg/index';
+export * from './iconify/index.js';
+export * from './svg/index.js';

packages/icons/src/svg/index.ts

@@ -1,6 +1,6 @@
 import { createIconifyIcon } from '@vben-core/icons';
 
-import './load';
+import './load.js';
 
 const SvgAvatar1Icon = createIconifyIcon('svg:avatar-1');
 const SvgAvatar2Icon = createIconifyIcon('svg:avatar-2');

packages/icons/src/svg/load.ts

@@ -1,4 +1,6 @@
-import { addIcon, type IconifyIcon } from '@vben-core/icons';
+import type { IconifyIconStructure } from '@vben-core/icons';
+
+import { addIcon } from '@vben-core/icons';
 
 let loaded = false;
 if (!loaded) {
@@ -6,7 +8,7 @@ if (!loaded) {
   loaded = true;
 }
 
-function parseSvg(svgData: string): IconifyIcon {
+function parseSvg(svgData: string): IconifyIconStructure {
   const parser = new DOMParser();
   const xmlDoc = parser.parseFromString(svgData, 'image/svg+xml');
   const svgElement = xmlDoc.documentElement;