Clarify icon sizing rules for NFS icons

Document the IconElement sizing contract, ensure deprecated icon component registrations inherit size correctly, and add changesets for the affected icon migration packages.

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

.changeset/nfs-icon-alpha-plugins.md

@@ -0,0 +1,13 @@
+---
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-app-visualizer': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-unprocessed-entities': patch
+'@backstage/plugin-devtools': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-search': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-user-settings': patch
+---
+
+Updated alpha plugin icons to follow the new frontend icon sizing rules when rendered in plugin and navigation surfaces.

.changeset/nfs-icon-foundations.md

@@ -0,0 +1,7 @@
+---
+'@backstage/core-components': patch
+'@backstage/frontend-app-api': patch
+'@backstage/frontend-plugin-api': patch
+---
+
+Clarified the `IconElement` sizing contract for the new frontend system and aligned legacy system icon rendering with the new icon API.

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

@@ -61,8 +61,6 @@ describe('DefaultIconsApi', () => {
     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()', () => {

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

@@ -46,7 +46,10 @@ export class DefaultIconsApi implements IconsApi {
           return [key, value];
         }
         deprecatedKeys.push(key);
-        return [key, createElement(value as IconComponent)];
+        return [
+          key,
+          createElement(value as IconComponent, { fontSize: 'inherit' }),
+        ];
       }),
     );
 

packages/frontend-plugin-api/src/icons/types.ts

@@ -38,17 +38,18 @@ export type IconComponent = ComponentType<{
 }>;
 
 /**
- * The type used for icon elements throughout Backstage. It is recommended to
- * use icons from `@remixicon/react`.
+ * The type used for icon elements throughout Backstage.
  *
  * @remarks
  *
- * Icons should be exactly 24x24 pixels in size.
+ * Icon elements should behave like rendering a plain icon directly, for example
+ * from `@remixicon/react`, and are expected to be sized by the surrounding UI.
+ * Icons should be exactly 24x24 pixels in size by default.
  *
- * Using icons from `@remixicon/react` is preferred, but using icons from
+ * Using icons from `@remixicon/react` is preferred. Using icons from
  * `@material-ui/icons` or `AppIcon` and its variants from
- * `@backstage/core-components` is supported but depreceated. When using these
- * icons, you must set the `fontSize` to `'inherit'`.
+ * `@backstage/core-components` is supported while migrating, but deprecated.
+ * When using those icons, you must set `fontSize="inherit"` on the element.
  *
  * @public
  */

plugins/app/src/extensions/IconsApi.tsx

@@ -45,15 +45,7 @@ export const IconsApi = ApiBlueprint.makeWithOverrides({
           return new DefaultIconsApi(
             inputs.icons
               .map(i => i.get(IconBundleBlueprint.dataRefs.icons))
-              .reduce(
-                (acc, bundle) => ({ ...acc, ...bundle }),
-                Object.fromEntries(
-                  Object.entries(defaultIcons).map(([key, Icon]) => [
-                    key,
-                    <Icon />,
-                  ]),
-                ),
-              ),
+              .reduce((acc, bundle) => ({ ...acc, ...bundle }), defaultIcons),
           );
         },
       }),