further NFS icon migration and alignment

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.test.ts

@@ -59,6 +59,10 @@ describe('DefaultIconsApi', () => {
     expect(result).toBeTruthy();
     // @ts-expect-error accessing internal React element structure
     expect(result.type).toBe(MyIcon);
+    // @ts-expect-error accessing internal React element structure
+    expect(result.props.fontSize).toBe('inherit');
+    // @ts-expect-error accessing internal React element structure
+    expect(result.props.size).toBe('1em');
   });
 
   it('should wrap IconElement values in a component for getIcon()', () => {
@@ -69,10 +73,31 @@ describe('DefaultIconsApi', () => {
     expect(icon).toBeDefined();
     expect(typeof icon).toBe('function');
     // @ts-expect-error testing runtime behavior
-    expect(icon({})).toBe(element);
+    const result = icon({});
+    // @ts-expect-error accessing internal React element structure
+    expect(result.type).toBe('span');
+    // @ts-expect-error accessing internal React element structure
+    expect(result.props.style).toEqual({
+      display: 'inline-flex',
+      fontSize: '1.5rem',
+      lineHeight: 0,
+    });
+    // @ts-expect-error accessing internal React element structure
+    expect(result.props.children).toBe(element);
     expect(api.getIcon('myIcon')).toBe(icon);
   });
 
+  it('should honor fontSize for getIcon()', () => {
+    const element = createElement('svg');
+    const api = new DefaultIconsApi({ myIcon: element });
+    const icon = api.getIcon('myIcon');
+
+    // @ts-expect-error testing runtime behavior
+    const result = icon({ fontSize: 'small' });
+    // @ts-expect-error accessing internal React element structure
+    expect(result.props.style.fontSize).toBe('1.25rem');
+  });
+
   it('should wrap null IconElement in a component for getIcon()', () => {
     const api = new DefaultIconsApi({ empty: null });
 

packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.ts

@@ -21,6 +21,13 @@ import {
 } from '@backstage/frontend-plugin-api';
 import { createElement, isValidElement } from 'react';
 
+const legacyFontSizeMap = {
+  inherit: 'inherit',
+  small: '1.25rem',
+  medium: '1.5rem',
+  large: '2.1875rem',
+} as const;
+
 /**
  * Implementation for the {@link IconsApi}
  *
@@ -65,7 +72,24 @@ export class DefaultIconsApi implements IconsApi {
     if (el === undefined) {
       return undefined;
     }
-    component = () => el;
+    component = ({ fontSize = 'medium' }) => {
+      if (el === null) {
+        return null;
+      }
+
+      return createElement(
+        // eslint-disable-next-line react/forbid-elements
+        'span',
+        {
+          style: {
+            display: 'inline-flex',
+            fontSize: legacyFontSizeMap[fontSize],
+            lineHeight: 0,
+          },
+        },
+        el,
+      );
+    };
     this.#components.set(key, component);
     return component;
   }