fix(editor): fix color of the circle on loading icon (#12092)

* Unified loading icon
* Removed loading icon on image block
* Fixed color of circle on loading icon

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Icons in image fallback and loading states now automatically adapt to the current theme (light or dark mode) for a more consistent visual experience.

- **Style**
  - Updated loading, success, and error icons to support theming and improved their color assignments for better visibility in different themes.

- **Refactor**
  - Replaced static icon usage across several components with dynamic, theme-aware icons to ensure consistent appearance throughout the app.
  - Removed static SVG icon exports and replaced them with theme-aware icon functions for improved maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/image/src/components/image-block-fallback.ts

@@ -1,14 +1,14 @@
-import type { ImageBlockModel } from '@blocksuite/affine-model';
+import { getLoadingIconWith } from '@blocksuite/affine-components/icons';
+import type { ColorScheme, ImageBlockModel } from '@blocksuite/affine-model';
 import { humanFileSize } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
+import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
 import { modelContext, ShadowlessElement } from '@blocksuite/std';
 import { consume } from '@lit/context';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { FailedImageIcon, LoadedImageIcon, LoadingIcon } from '../styles.js';
-
 export const SURFACE_IMAGE_CARD_WIDTH = 220;
 export const SURFACE_IMAGE_CARD_HEIGHT = 122;
 export const NOTE_IMAGE_CARD_WIDTH = 752;
@@ -62,7 +62,7 @@ export class ImageBlockFallbackCard extends WithDisposable(ShadowlessElement) {
   `;
 
   override render() {
-    const { mode, loading, error, model } = this;
+    const { theme, mode, loading, error, model } = this;
 
     const isEdgeless = mode === 'edgeless';
     const width = isEdgeless
@@ -82,10 +82,10 @@ export class ImageBlockFallbackCard extends WithDisposable(ShadowlessElement) {
     });
 
     const titleIcon = loading
-      ? LoadingIcon
+      ? getLoadingIconWith(theme)
       : error
-        ? FailedImageIcon
-        : LoadedImageIcon;
+        ? BrokenImageIcon()
+        : ImageIcon();
 
     const titleText = loading
       ? 'Loading image...'
@@ -125,6 +125,9 @@ export class ImageBlockFallbackCard extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   accessor mode!: 'page' | 'edgeless';
 
+  @property({ attribute: false })
+  accessor theme!: ColorScheme;
+
   @consume({ context: modelContext })
   accessor model!: ImageBlockModel;
 }