From 072b5b22df73dc4d757ea2f826fb875c94258966 Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Thu, 9 Oct 2025 17:04:24 +0800
Subject: [PATCH] fix(core): display affine icon in lit correctly (#13708)

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

## Summary by CodeRabbit

- New Features
- Added an alternative icon rendering option for document icons,
delivering crisper visuals and consistent emoji/icon display.
- Style
- Improved icon alignment and sizing within grouped icon buttons for
more consistent centering and appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Wu Yue <akumatus@gmail.com>
---
 .../affine/widgets/linked-doc/src/styles.ts   |  8 +++++++-
 .../services/doc-display-meta.ts              |  6 ++++--
 .../doc-display-meta/services/icon.tsx        | 20 ++++++++++++++++++-
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/blocksuite/affine/widgets/linked-doc/src/styles.ts b/blocksuite/affine/widgets/linked-doc/src/styles.ts
index e7d6e4545..2aa717ade 100644
--- a/blocksuite/affine/widgets/linked-doc/src/styles.ts
+++ b/blocksuite/affine/widgets/linked-doc/src/styles.ts
@@ -76,10 +76,16 @@ export const linkedDocPopoverStyles = css`
     border-top: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
   }
 
-  .group icon-button svg {
+  .group icon-button svg,
+  .group icon-button .icon {
     width: 20px;
     height: 20px;
   }
+  .group icon-button .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
   .linked-doc-popover .group {
     display: flex;
diff --git a/packages/frontend/core/src/modules/doc-display-meta/services/doc-display-meta.ts b/packages/frontend/core/src/modules/doc-display-meta/services/doc-display-meta.ts
index f0fca2a56..5adaa0ab5 100644
--- a/packages/frontend/core/src/modules/doc-display-meta/services/doc-display-meta.ts
+++ b/packages/frontend/core/src/modules/doc-display-meta/services/doc-display-meta.ts
@@ -29,7 +29,7 @@ import type { DocRecord, DocsService } from '../../doc';
 import type { ExplorerIconService } from '../../explorer-icon/services/explorer-icon';
 import type { I18nService } from '../../i18n';
 import type { JournalService } from '../../journal';
-import { getDocIconComponent } from './icon';
+import { getDocIconComponent, getDocIconComponentLit } from './icon';
 
 type IconType = 'rc' | 'lit';
 interface DocDisplayIconOptions<T extends IconType> {
@@ -152,7 +152,9 @@ export class DocDisplayMetaService extends Service {
         // if (emoji) return () => emoji;
         const icon = get(this.explorerIconService.icon$('doc', docId))?.icon;
         if (icon) {
-          return getDocIconComponent(icon);
+          return options?.type === 'lit'
+            ? getDocIconComponentLit(icon)
+            : getDocIconComponent(icon);
         }
       }
 
diff --git a/packages/frontend/core/src/modules/doc-display-meta/services/icon.tsx b/packages/frontend/core/src/modules/doc-display-meta/services/icon.tsx
index f65367056..ec0fc6e7f 100644
--- a/packages/frontend/core/src/modules/doc-display-meta/services/icon.tsx
+++ b/packages/frontend/core/src/modules/doc-display-meta/services/icon.tsx
@@ -1,7 +1,25 @@
-import { type IconData, IconRenderer } from '@affine/component';
+import { type IconData, IconRenderer, IconType } from '@affine/component';
+import * as litIcons from '@blocksuite/icons/lit';
+import { html } from 'lit';
 
 export const getDocIconComponent = (icon: IconData) => {
   const Icon = () => <IconRenderer data={icon} />;
   Icon.displayName = 'DocIcon';
   return Icon;
 };
+
+export const getDocIconComponentLit = (icon: IconData) => {
+  return () => {
+    if (icon.type === IconType.Emoji) {
+      return html`<div class="icon">${icon.unicode}</div>`;
+    }
+    if (icon.type === IconType.AffineIcon) {
+      return html`<div
+        style="color: ${icon.color}; display: flex; align-items: center; justify-content: center;"
+      >
+        ${litIcons[`${icon.name}Icon` as keyof typeof litIcons]()}
+      </div>`;
+    }
+    return null;
+  };
+};