plugin icons and titles

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
2026-02-09 23:02:34 +01:00
parent 4b996d05d3
commit e1f22f2d15
31 changed files with 1362 additions and 89 deletions
@@ -26,6 +26,8 @@ const myPage = PageBlueprint.make({

 export default createFrontendPlugin({
  pluginId: 'my-plugin',
+  title: 'My Plugin',
+  icon: MyPluginIcon,
  extensions: [myPage],
 });
 ```
@@ -36,6 +38,30 @@ Each plugin needs an ID, which is used to uniquely identify the plugin within an

 The plugin ID should generally be part of the of the package name and use kebab-case. See both the [frontend naming patterns section](./50-naming-patterns.md), as well as the [package metadata section](../../tooling/package-metadata.md#name) for more information.

+### `title` option
+
+The display title of the plugin, used in page headers and navigation. Falls back to the plugin ID if not provided.
+
+```tsx
+export default createFrontendPlugin({
+  pluginId: 'my-plugin',
+  title: 'My Plugin',
+  extensions: [...],
+});
+```
+
+### `icon` option
+
+The display icon of the plugin, used in page headers and navigation. The type is `IconComponent` from `@backstage/frontend-plugin-api`, which is a React component that accepts an optional `fontSize` prop.
+
+```tsx
+export default createFrontendPlugin({
+  pluginId: 'my-plugin',
+  icon: MyPluginIcon,
+  extensions: [...],
+});
+```
+
 ### `extensions` option

 These are the [extensions](./20-extensions.md) that the plugin provides to the app. Note that you should not export any of these extensions separately from the plugin package, as they can already by accessed via the `getExtension` method of the plugin instance using the extension ID.
@@ -21,7 +21,7 @@ Navigation item extensions are used to provide menu items that link to different

 ### Page - [Reference](https://backstage.io/api/stable/variables/_backstage_frontend-plugin-api.PageBlueprint.html)

-Page extensions provide content for a particular route in the app. By default pages are attached to the app routes extensions, which renders the root routes.
+Page extensions provide content for a particular route in the app. By default pages are attached to the app routes extensions, which renders the root routes. Pages automatically inherit the plugin's `title` and `icon` as defaults, which can be overridden per-page via `PageBlueprint` params.

 ## Extension blueprints in `@backstage/frontend-plugin-api/alpha`

@@ -42,6 +42,14 @@ const examplePage = createExtension({

 The `title` data reference can be used for defining the extension input/output of string titles.

+### `icon`
+
+|     id      |      type       |
+| :---------: | :-------------: |
+| `core.icon` | `IconComponent` |
+
+The `icon` data reference can be used for defining the extension input/output of icon components. The type is `IconComponent` from `@backstage/frontend-plugin-api`.
+
 ### `routePath`

 |         id          |   type   |