Merge pull request #17592 from afscrome/systemicons

Updated customise theme docs

.changeset/dry-boats-sniff.md

@@ -0,0 +1,10 @@
+---
+'@backstage/app-defaults': patch
+---
+
+Added a System Icon for resource entities.
+This can be obtained using:
+
+```ts
+useApp().getSystemIcon('kind:resource');
+```

docs/getting-started/app-custom-theme.md

@@ -400,15 +400,10 @@ As you've seen there are many ways that you can customize your Backstage app. Th
 For this example we'll show you how you can expand the sidebar with a sub-menu:
 
 1. Open the `Root.tsx` file located in `packages/app/src/components/Root` as this is where the sidebar code lives
-2. Then we want to add the following imports for the icons:
+2. Then we want to add the following import for `useApp`:
 
    ```tsx title="packages/app/src/components/Root/Root.tsx"
-   import ApiIcon from '@material-ui/icons/Extension';
-   import ComponentIcon from '@material-ui/icons/Memory';
-   import DomainIcon from '@material-ui/icons/Apartment';
-   import ResourceIcon from '@material-ui/icons/Work';
-   import SystemIcon from '@material-ui/icons/Category';
-   import UserIcon from '@material-ui/icons/Person';
+   import { useApp } from '@backstage/core-plugin-api';
    ```
 
 3. Then update the `@backstage/core-components` import like this:
@@ -441,39 +436,39 @@ For this example we'll show you how you can expand the sidebar with a sub-menu:
        <SidebarSubmenuItem
          title="Domains"
          to="catalog?filters[kind]=domain"
-         icon={DomainIcon}
+         icon={useApp().getSystemIcon('kind:domain')}
        />
        <SidebarSubmenuItem
          title="Systems"
          to="catalog?filters[kind]=system"
-         icon={SystemIcon}
+         icon={useApp().getSystemIcon('kind:system')}
        />
        <SidebarSubmenuItem
          title="Components"
          to="catalog?filters[kind]=component"
-         icon={ComponentIcon}
+         icon={useApp().getSystemIcon('kind:component')}
        />
        <SidebarSubmenuItem
          title="APIs"
          to="catalog?filters[kind]=api"
-         icon={ApiIcon}
+         icon={useApp().getSystemIcon('kind:api')}
        />
        <SidebarDivider />
        <SidebarSubmenuItem
          title="Resources"
          to="catalog?filters[kind]=resource"
-         icon={ResourceIcon}
+         icon={useApp().getSystemIcon('kind:resource')}
        />
        <SidebarDivider />
        <SidebarSubmenuItem
          title="Groups"
          to="catalog?filters[kind]=group"
-         icon={GroupIcon}
+         icon={useApp().getSystemIcon('kind:group')}
        />
        <SidebarSubmenuItem
          title="Users"
          to="catalog?filters[kind]=user"
-         icon={UserIcon}
+         icon={useApp().getSystemIcon('kind:user')}
        />
      </SidebarSubmenu>
    </SidebarItem>

packages/app-defaults/src/defaults/icons.tsx

@@ -34,6 +34,7 @@ import MuiMenuBookIcon from '@material-ui/icons/MenuBook';
 import MuiPeopleIcon from '@material-ui/icons/People';
 import MuiPersonIcon from '@material-ui/icons/Person';
 import MuiWarningIcon from '@material-ui/icons/Warning';
+import MuiWorkIcon from '@material-ui/icons/Work';
 
 export const icons = {
   brokenImage: MuiBrokenImageIcon as IconComponent,
@@ -56,6 +57,7 @@ export const icons = {
   'kind:location': MuiLocationOnIcon as IconComponent,
   'kind:system': MuiCategoryIcon as IconComponent,
   'kind:user': MuiPersonIcon as IconComponent,
+  'kind:resource': MuiWorkIcon as IconComponent,
   user: MuiPersonIcon as IconComponent,
   warning: MuiWarningIcon as IconComponent,
 };

packages/app/src/components/Root/Root.tsx

@@ -17,11 +17,9 @@
 import React, { PropsWithChildren } from 'react';
 import { makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
-import ExtensionIcon from '@material-ui/icons/Extension';
 import RuleIcon from '@material-ui/icons/AssignmentTurnedIn';
 import MapIcon from '@material-ui/icons/MyLocation';
 import LayersIcon from '@material-ui/icons/Layers';
-import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import SearchIcon from '@material-ui/icons/Search';
@@ -51,16 +49,9 @@ import {
   SidebarSubmenuItem,
 } from '@backstage/core-components';
 import { MyGroupsSidebarItem } from '@backstage/plugin-org';
-import GroupIcon from '@material-ui/icons/People';
 import { SearchModal } from '../search/SearchModal';
 import Score from '@material-ui/icons/Score';
-
-import ApiIcon from '@material-ui/icons/Extension';
-import ComponentIcon from '@material-ui/icons/Memory';
-import DomainIcon from '@material-ui/icons/Apartment';
-import ResourceIcon from '@material-ui/icons/Work';
-import SystemIcon from '@material-ui/icons/Category';
-import UserIcon from '@material-ui/icons/Person';
+import { useApp } from '@backstage/core-plugin-api';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -107,49 +98,57 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
             <SidebarSubmenuItem
               title="Domains"
               to="catalog?filters[kind]=domain"
-              icon={DomainIcon}
+              icon={useApp().getSystemIcon('kind:domain')}
             />
             <SidebarSubmenuItem
               title="Systems"
               to="catalog?filters[kind]=system"
-              icon={SystemIcon}
+              icon={useApp().getSystemIcon('kind:system')}
             />
             <SidebarSubmenuItem
               title="Components"
               to="catalog?filters[kind]=component"
-              icon={ComponentIcon}
+              icon={useApp().getSystemIcon('kind:component')}
             />
             <SidebarSubmenuItem
               title="APIs"
               to="catalog?filters[kind]=api"
-              icon={ApiIcon}
+              icon={useApp().getSystemIcon('kind:api')}
             />
             <SidebarDivider />
             <SidebarSubmenuItem
               title="Resources"
               to="catalog?filters[kind]=resource"
-              icon={ResourceIcon}
+              icon={useApp().getSystemIcon('kind:resource')}
             />
             <SidebarDivider />
             <SidebarSubmenuItem
               title="Groups"
               to="catalog?filters[kind]=group"
-              icon={GroupIcon}
+              icon={useApp().getSystemIcon('kind:group')}
             />
             <SidebarSubmenuItem
               title="Users"
               to="catalog?filters[kind]=user"
-              icon={UserIcon}
+              icon={useApp().getSystemIcon('kind:user')}
             />
           </SidebarSubmenu>
         </SidebarItem>
         <MyGroupsSidebarItem
           singularTitle="My Squad"
           pluralTitle="My Squads"
-          icon={GroupIcon}
+          icon={useApp().getSystemIcon('group')!}
+        />
+        <SidebarItem
+          icon={useApp().getSystemIcon('kind:api')!}
+          to="api-docs"
+          text="APIs"
+        />
+        <SidebarItem
+          icon={useApp().getSystemIcon('docs')!}
+          to="docs"
+          text="Docs"
         />
-        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
         <SidebarItem icon={PlaylistPlayIcon} to="playlist" text="Playlists" />
         <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />