Merge pull request #8923 from kuangp/feat/shortcutIcon

feat(shortcuts): make sidebar item icon configurable

.changeset/smart-windows-watch.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-shortcuts': patch
+---
+
+Allow shortcut side bar item icon to be configurable

plugins/shortcuts/api-report.md

@@ -7,6 +7,7 @@
 
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { IconComponent } from '@backstage/core-plugin-api';
 import { Observable } from '@backstage/types';
 import ObservableImpl from 'zen-observable';
 import { StorageApi } from '@backstage/core-plugin-api';
@@ -51,7 +52,7 @@ export interface ShortcutApi {
 // Warning: (ae-missing-release-tag) "Shortcuts" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const Shortcuts: () => JSX.Element;
+export const Shortcuts: (props: ShortcutsProps) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "shortcutsApiRef" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -62,4 +63,10 @@ export const shortcutsApiRef: ApiRef<ShortcutApi>;
 //
 // @public (undocumented)
 export const shortcutsPlugin: BackstagePlugin<{}, {}>;
+
+// @public
+export interface ShortcutsProps {
+  // (undocumented)
+  icon?: IconComponent;
+}
 ```

plugins/shortcuts/src/Shortcuts.tsx

@@ -26,9 +26,18 @@ import {
   SidebarItem,
   SidebarScrollWrapper,
 } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
+import { IconComponent, useApi } from '@backstage/core-plugin-api';
 
-export const Shortcuts = () => {
+/**
+ * ShortcutsProps
+ * Props for the {@link Shortcuts} component.
+ * @public
+ */
+export interface ShortcutsProps {
+  icon?: IconComponent;
+}
+
+export const Shortcuts = (props: ShortcutsProps) => {
   const shortcutApi = useApi(shortcutsApiRef);
   const shortcuts = useObservable(
     useMemo(() => shortcutApi.shortcut$(), [shortcutApi]),
@@ -47,7 +56,7 @@ export const Shortcuts = () => {
   return (
     <SidebarScrollWrapper>
       <SidebarItem
-        icon={PlayListAddIcon}
+        icon={props.icon ?? PlayListAddIcon}
         text="Add Shortcuts"
         onClick={handleClick}
       />

plugins/shortcuts/src/index.ts

@@ -23,3 +23,4 @@
 export { shortcutsPlugin, Shortcuts } from './plugin';
 export * from './api';
 export type { Shortcut } from './types';
+export type { ShortcutsProps } from './Shortcuts';