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 -->

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

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

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({

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