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>

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);
         }
       }
 

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;
+  };
+};