feat(icon): 添加图标组件并更新图标类型定义

- 引入 Icon 组件到 dashboard 页面
- 更新 icon-ids.ts 文件中的图标枚举类型
- 在 Sprite.svelte 中添加新的图标 symbol 定义
- 移除旧的 sprite.svg 文件内容
- 为 panel-right-close 和 panel-right-close-solid 图标添加 SVG 路径定义

src/lib/assets/sprite.svg

@@ -1,8 +1,2 @@
-<svg>
+
-    <symbol id="panel-right-close" viewBox="0 0 24 24">
+
-        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
-            <path d="M15 3.5v17M8 9l3 3l-3 3" />
-            <path d="M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6z" />
-        </g>
-    </symbol>
-</svg>

src/lib/components/icon/Sprite.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
-import SpriteSvg from '$lib/assets/sprite.svg'
+// import SpriteSvg from '$lib/assets/sprite.svg'
-
 </script>
 
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;" >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+<!--	&lt;!&ndash; eslint-disable-next-line svelte/no-at-html-tags &ndash;&gt;-->
-	{@html SpriteSvg}
+<!--	{@html SpriteSvg}-->
+	<symbol id="panel-right-close" viewBox="0 0 24 24">
+		<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+			<path d="M15 3.5v17M8 9l3 3l-3 3" />
+			<path d="M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6z" />
+		</g>
+	</symbol>
+	<symbol id="panel-right-close-solid" viewBox="0 0 24 24">
+		<path fill="currentColor" d="M9.367 2.25h5.266c1.092 0 1.958 0 2.655.057c.714.058 1.317.18 1.869.46a4.75 4.75 0 0 1 2.075 2.077c.281.55.403 1.154.461 1.868c.057.697.057 1.563.057 2.655v5.266c0 1.092 0 1.958-.057 2.655c-.058.714-.18 1.317-.46 1.869a4.75 4.75 0 0 1-2.076 2.075c-.552.281-1.155.403-1.869.461c-.697.057-1.563.057-2.655.057H9.367c-1.092 0-1.958 0-2.655-.057c-.714-.058-1.317-.18-1.868-.46a4.75 4.75 0 0 1-2.076-2.076c-.281-.552-.403-1.155-.461-1.869c-.057-.697-.057-1.563-.057-2.655V9.367c0-1.092 0-1.958.057-2.655c.058-.714.18-1.317.46-1.868a4.75 4.75 0 0 1 2.077-2.076c.55-.281 1.154-.403 1.868-.461c.697-.057 1.563-.057 2.655-.057m6.383 17.997a20 20 0 0 0 1.416-.049c.62-.05 1.005-.147 1.31-.302a3.25 3.25 0 0 0 1.42-1.42c.155-.305.251-.69.302-1.31c.051-.63.052-1.434.052-2.566V9.4c0-1.132 0-1.937-.052-2.566c-.05-.62-.147-1.005-.302-1.31a3.25 3.25 0 0 0-1.42-1.42c-.305-.155-.69-.251-1.31-.302a20 20 0 0 0-1.416-.05zM7.47 8.47a.75.75 0 0 0 0 1.06L9.94 12l-2.47 2.47a.75.75 0 1 0 1.06 1.06l3-3a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 0 0-1.06 0" />
+	</symbol>
 </svg>

src/lib/types/icon-ids.ts

@@ -1,3 +1,4 @@
-export type IconId = {
+export type IconId =
-  [key: string]: string;
+	"panel-right-close" |
-};
+	"panel-right-close-solid"
+;

src/routes/app/dashboard/+page.svelte

@@ -5,6 +5,7 @@
 	import { authService } from '$lib/api/services/authService.ts';
 	import ThemeSelector from '$lib/widget/ThemeSelector.svelte';
 	import { sidebarStore, toggleSidebarOpen } from '$lib/stores/sidebarStore';
+	import Icon from '$lib/components/icon/Icon.svelte';
 
 
 
@@ -25,7 +26,10 @@
 					class="p-2 hover:bg-gray-700/50 rounded-full  transition-colors"
 					aria-label="Toggle Menu"
 				>
-				123
+					<Icon id={$sidebarStore.isExpanded ? "panel-right-close" :"panel-right-close-solid" }
+								on:hoever={}
+								size="24" />
+
 				</button>
 			</div>
 			<div>1</div>