From 7318ef1ed49f11cb68b859cdd99dfb8643ef54c5 Mon Sep 17 00:00:00 2001
From: Diego Vega Centeno <da-vce@hotmail.com>
Date: Tue, 21 Jul 2026 01:57:50 -0500
Subject: [PATCH] fix(core): forward svg props to icon renderer (#15278)

## Problem

Page reference icon is vertically misaligned because the
`pageReferenceIcon` class is not applied.
This is because `IconRenderer` does not forward SVG props to the
underlying `AffineIconRenderer` component.

## Fix

Main fix:
- Forward SVG props in `getDocIconComponent`.
- Add support for SVG props in `IconRenderer`.

Side fixes:
- Comment out color in `pageReferenceIcon` style so the icon inherits
its parent color now that the class is actually applied
- Remove hardcoded SVG margin used for vertical alignment.

## Before / After

**Before**
<img width="405" height="163" alt="before"
src="https://github.com/user-attachments/assets/45c6f0c9-d2f8-4295-832a-03018cbe0bf1"
/>

**After**
<img width="404" height="156" alt="after"
src="https://github.com/user-attachments/assets/fa3f955a-b1fd-4bc1-b966-09b5b9d6a7e4"
/>

## Related issues

- Fixes #14978: Makes icon vertically aligned.


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

## Summary by CodeRabbit

- **Bug Fixes**
- Improved icon rendering so additional display properties are correctly
passed through to Affine icons.
- Updated document icon components to support standard SVG properties,
enabling more consistent customization.
- Refined reference icon styling to allow color inheritance from
surrounding UI context.
- Removed unnecessary spacing beneath reference icons for cleaner
alignment.



<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../inlines/reference/src/reference-node/reference-node.ts   | 4 ----
 packages/frontend/component/src/ui/icon-picker/renderer.tsx  | 5 ++++-
 .../core/src/components/affine/reference-link/styles.css.ts  | 2 +-
 .../core/src/modules/doc-display-meta/services/icon.tsx      | 4 +++-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/blocksuite/affine/inlines/reference/src/reference-node/reference-node.ts b/blocksuite/affine/inlines/reference/src/reference-node/reference-node.ts
index b4fe032545..e9c0a957cc 100644
--- a/blocksuite/affine/inlines/reference/src/reference-node/reference-node.ts
+++ b/blocksuite/affine/inlines/reference/src/reference-node/reference-node.ts
@@ -49,10 +49,6 @@ export class AffineReference extends WithDisposable(ShadowlessElement) {
       cursor: pointer;
       user-select: none;
       padding: 1px 2px 1px 0;
-
-      svg {
-        margin-bottom: 0.1em;
-      }
     }
     .affine-reference:hover {
       background: var(--affine-hover-color);
diff --git a/packages/frontend/component/src/ui/icon-picker/renderer.tsx b/packages/frontend/component/src/ui/icon-picker/renderer.tsx
index 3410798565..d6842d66c2 100644
--- a/packages/frontend/component/src/ui/icon-picker/renderer.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/renderer.tsx
@@ -6,6 +6,7 @@ import { type IconData, IconType } from './type';
 export const IconRenderer = ({
   data,
   fallback,
+  ...props
 }: {
   data?: IconData;
   fallback?: ReactNode;
@@ -18,7 +19,9 @@ export const IconRenderer = ({
     return data.unicode;
   }
   if (data.type === IconType.AffineIcon && data.name) {
-    return <AffineIconRenderer name={data.name} color={data.color} />;
+    return (
+      <AffineIconRenderer name={data.name} color={data.color} {...props} />
+    );
   }
   if (data.type === IconType.Blob) {
     // Not supported yet
diff --git a/packages/frontend/core/src/components/affine/reference-link/styles.css.ts b/packages/frontend/core/src/components/affine/reference-link/styles.css.ts
index 3bb23f49c4..53c487472b 100644
--- a/packages/frontend/core/src/components/affine/reference-link/styles.css.ts
+++ b/packages/frontend/core/src/components/affine/reference-link/styles.css.ts
@@ -5,7 +5,7 @@ export const pageReferenceIcon = style({
   verticalAlign: 'middle',
   fontSize: '1.1em',
   transform: 'translate(2px, -1px)',
-  color: cssVarV2('icon/primary'),
+  // color: cssVarV2('icon/primary'),
 });
 
 export const pageReferenceLink = style({
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 ec0fc6e7f5..1a1ff2c16c 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
@@ -3,7 +3,9 @@ import * as litIcons from '@blocksuite/icons/lit';
 import { html } from 'lit';
 
 export const getDocIconComponent = (icon: IconData) => {
-  const Icon = () => <IconRenderer data={icon} />;
+  const Icon = (props: React.SVGProps<SVGSVGElement>) => (
+    <IconRenderer data={icon} {...props} />
+  );
   Icon.displayName = 'DocIcon';
   return Icon;
 };