feat(icons): replace inline SVGs with Icon component for improved maintainability

Author: ririv

src/assets/icons/align/align-center.svg

@@ -6,6 +6,8 @@
     import pageOrientationSvg from '@/assets/icons/page-orientation.svg?raw';
     import githubSvg from '@/assets/icons/github.svg?raw';
     import xiaohongshuSvg from '@/assets/icons/xiaohongshu.svg?raw';
+    import refreshSvg from '@/assets/icons/refresh.svg?raw';
+    import folderOpenSvg from '@/assets/icons/folder-open.svg?raw';
 
     interface Props {
         name?: string;
@@ -25,7 +27,9 @@
         'check': successSvg,
         'page-orientation': pageOrientationSvg,
         'github': githubSvg,
-        'xiaohongshu': xiaohongshuSvg
+        'xiaohongshu': xiaohongshuSvg,
+        'refresh': refreshSvg,
+        'folder-open': folderOpenSvg
     };
 
     const svgContent = $derived.by(() => {

src/assets/icons/align/align-inner.svg

@@ -8,6 +8,7 @@
     import { handleImageUpdate } from "@/lib/preview-engine/image-engine";
     import PagedRenderer from "./renderers/PagedRenderer.svelte";
     import { docStore } from '@/stores/docStore.svelte'; // Import docStore
+    import Icon from "@/components/Icon.svelte";
 
     interface Props {
         mode?: "svg" | "image" | "paged";
@@ -199,16 +200,7 @@
             onclick={handleRefreshClick}
             title="Refresh Preview"
         >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 1024 1024"
-                fill="currentColor"
-                ><path
-                    d="M896 198.4 896 198.4l0 179.2 0 0c0 19.2-6.4 32-19.2 44.8-12.8 12.8-32 19.2-44.8 19.2l0 0-179.2 0 0 0c-19.2 0-32-6.4-44.8-19.2-25.6-25.6-25.6-64 0-89.6C620.8 320 633.6 313.6 652.8 313.6l0 0 25.6 0C627.2 275.2 576 256 518.4 256 441.6 256 377.6 281.6 332.8 332.8l0 0c-25.6 25.6-64 25.6-89.6 0-25.6-25.6-25.6-64 0-89.6l0 0C313.6 172.8 409.6 128 518.4 128c96 0 185.6 38.4 249.6 96L768 198.4l0 0c0-19.2 6.4-32 19.2-44.8 25.6-25.6 64-25.6 89.6 0C889.6 160 896 179.2 896 198.4zM416 691.2c-12.8 12.8-32 19.2-44.8 19.2l0 0L352 710.4C396.8 748.8 448 768 505.6 768c70.4 0 134.4-25.6 179.2-76.8l0 0c25.6-25.6 64-25.6 89.6 0 25.6 25.6 25.6 64 0 89.6l0 0C710.4 851.2 614.4 896 505.6 896c-96 0-185.6-38.4-249.6-96l0 32 0 0c0 19.2-6.4 32-19.2 44.8-25.6 25.6-64 25.6-89.6 0C134.4 864 128 844.8 128 825.6l0 0 0-179.2 0 0c0-19.2 6.4-32 19.2-44.8C160 588.8 172.8 582.4 192 582.4l0 0 179.2 0 0 0c19.2 0 32 6.4 44.8 19.2C441.6 627.2 441.6 665.6 416 691.2z"
-                ></path></svg
-            >
+            <Icon name="refresh" width="20" height="20" />
         </button>
     {/if}
 </div>
@@ -514,21 +506,10 @@
         color: #1677ff;
     }
 
-    .refresh-fab.spinning svg {
+    :global(.refresh-fab.spinning svg) {
         animation: spin 0.3s ease-out forwards;
     }
 
-    @keyframes spin {
-        from {
-            transform: rotate(0deg);
-        }
-        to {
-            transform: rotate(360deg);
-        }
-    }
-    .refresh-fab.spinning svg {
-        animation: spin 0.3s ease-out forwards;
-    }
     @keyframes spin {
         from {
             transform: rotate(0deg);