From f8287e5340b1affeda54975ff44ca60cabdc990a Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Mon, 18 Jul 2022 08:10:16 -0500 Subject: [PATCH 1/6] Added UserSettingsAvailableIconsTable and related documentation Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .../add-icons-links-example.png | Bin 0 -> 6342 bytes docs/getting-started/app-custom-theme.md | 51 ++++++++++++ .../core-app-api/src/app/AppContext.test.tsx | 1 + packages/core-app-api/src/app/AppManager.tsx | 9 +++ packages/core-app-api/src/app/types.ts | 5 ++ .../src/routing/RoutingProvider.test.tsx | 1 + packages/core-plugin-api/api-report.md | 7 ++ .../UserSettingsAvailableIconsTable.tsx | 73 ++++++++++++++++++ .../General/UserSettingsGeneral.tsx | 4 + 9 files changed, 151 insertions(+) create mode 100644 docs/assets/getting-started/add-icons-links-example.png create mode 100644 plugins/user-settings/src/components/General/UserSettingsAvailableIconsTable.tsx diff --git a/docs/assets/getting-started/add-icons-links-example.png b/docs/assets/getting-started/add-icons-links-example.png new file mode 100644 index 0000000000000000000000000000000000000000..dfff84b79cf18ae32d48dc8fccc8a7f432963d24 GIT binary patch literal 6342 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 WIX4@k#%lK_*(fc2O_I9xjsF5S|KEB5 literal 0 HcmV?d00001 diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 9ca82d01a1..fc39412d61 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -338,6 +338,57 @@ const app = createApp({ [...] ``` +## Adding Icons + +You can add more icons, if the [default icons](https://github.com/backstage/backstage/blob/8d83f5cb4fa0544b0f9160ac22bd5f0f1fe285c6/packages/app-defaults/src/defaults/icons.tsx#L38) do not fit your needs, so that they can be used in other places like for Links in your entities. For this example we'll be using icons from[Material UI](https://v4.mui.com/components/material-icons/) and specifically the `AlarmIcon`. Here's how to do that: + +1. First you will want to open your `App.tsx` in `/packages/app/src` +2. Then you want to import your icon, add this to the rest of your imports: `import AlarmIcon from '@material-ui/icons/Alarm';` +3. Next you want to add the icon like this to your `createApp`: + + ```diff + const app = createApp({ + apis: ..., + plugins: ..., + + icons: { + + alert: AlarmIcon, + + }, + themes: ..., + components: ..., + }); + ``` + +4. Now we can reference `alert` for our icon in our entity links like this: + + ```yaml + apiVersion: backstage.io/v1alpha1 + kind: Component + metadata: + name: artist-lookup + description: Artist Lookup + links: + - url: https://example.com/alert + title: Alerts + icon: alert + ``` + + And this is the result: + + ![Example Link with Alert icon](../assets/getting-started/add-icons-links-example.png) + + Another way you can use these icons is from the `AppContext` like this: + + ```ts + import { useApp } from '@backstage/core-plugin-api'; + + const app = useApp(); + const alertIcon = app.getSystemIcon('alert'); + ``` + + You might want to use this method if you have an icon you want to use in several locations. + +Note: If the icon is not available as one of the default icons or one you've added then it will fall back to Material UI's `LanguageIcon` + ## Custom Homepage In addition to a custom theme, a custom logo, you can also customize the diff --git a/packages/core-app-api/src/app/AppContext.test.tsx b/packages/core-app-api/src/app/AppContext.test.tsx index bc67ee3a9e..a27b7c6f35 100644 --- a/packages/core-app-api/src/app/AppContext.test.tsx +++ b/packages/core-app-api/src/app/AppContext.test.tsx @@ -36,6 +36,7 @@ describe('v1 consumer', () => { getPlugins: jest.fn(), getComponents: jest.fn(), getSystemIcon: jest.fn(), + getSystemIcons: jest.fn(), }; const renderedHook = renderHook(() => useMockAppV1(), { diff --git a/packages/core-app-api/src/app/AppManager.tsx b/packages/core-app-api/src/app/AppManager.tsx index 72c69f7da4..41c57afb98 100644 --- a/packages/core-app-api/src/app/AppManager.tsx +++ b/packages/core-app-api/src/app/AppManager.tsx @@ -71,6 +71,7 @@ import { AppComponents, AppConfigLoader, AppContext, + AppIcons, AppOptions, BackstageApp, SignInPageProps, @@ -153,6 +154,10 @@ class AppContextImpl implements AppContext { return this.app.getSystemIcon(key); } + getSystemIcons(): AppIcons & { [key in string]: IconComponent } { + return this.app.getSystemIcons(); + } + getComponents(): AppComponents { return this.app.getComponents(); } @@ -194,6 +199,10 @@ export class AppManager implements BackstageApp { return this.icons[key]; } + getSystemIcons(): AppIcons & { [key in string]: IconComponent } { + return this.icons; + } + getComponents(): AppComponents { return this.components; } diff --git a/packages/core-app-api/src/app/types.ts b/packages/core-app-api/src/app/types.ts index 979fb0496e..b196e2cf90 100644 --- a/packages/core-app-api/src/app/types.ts +++ b/packages/core-app-api/src/app/types.ts @@ -328,6 +328,11 @@ export type AppContext = { */ getSystemIcon(key: string): IconComponent | undefined; + /** + * Get a list of common and custom icons for this app. + */ + getSystemIcons(): AppIcons & { [key in string]: IconComponent }; + /** * Get the components registered for various purposes in the app. */ diff --git a/packages/core-app-api/src/routing/RoutingProvider.test.tsx b/packages/core-app-api/src/routing/RoutingProvider.test.tsx index dec92072fc..c559c0fff0 100644 --- a/packages/core-app-api/src/routing/RoutingProvider.test.tsx +++ b/packages/core-app-api/src/routing/RoutingProvider.test.tsx @@ -124,6 +124,7 @@ const Extension5 = plugin.provide( const mockContext = { getComponents: () => ({ Progress: () => null } as any), getSystemIcon: jest.fn(), + getSystemIcons: jest.fn(), getPlugins: jest.fn(), }; diff --git a/packages/core-plugin-api/api-report.md b/packages/core-plugin-api/api-report.md index 49e0be3800..e0686596aa 100644 --- a/packages/core-plugin-api/api-report.md +++ b/packages/core-plugin-api/api-report.md @@ -149,6 +149,9 @@ export type AppComponents = { export type AppContext = { getPlugins(): BackstagePlugin_2[]; getSystemIcon(key: string): IconComponent_2 | undefined; + getSystemIcons(): AppIcons & { + [key in string]: IconComponent_2; + }; getComponents(): AppComponents; }; @@ -780,4 +783,8 @@ export function withApis(apis: TypesToApiRefs):

( (props: React_2.PropsWithChildren>): JSX.Element; displayName: string; }; + +// Warnings were encountered during analysis: +// +// /backstage/dist-types/packages/core-app-api/src/app/types.d.ts:277:5 - (ae-forgotten-export) The symbol "AppIcons" needs to be exported by the entry point index.d.ts ``` diff --git a/plugins/user-settings/src/components/General/UserSettingsAvailableIconsTable.tsx b/plugins/user-settings/src/components/General/UserSettingsAvailableIconsTable.tsx new file mode 100644 index 0000000000..d0e6034c66 --- /dev/null +++ b/plugins/user-settings/src/components/General/UserSettingsAvailableIconsTable.tsx @@ -0,0 +1,73 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { IconComponent, useApp } from '@backstage/core-plugin-api'; +import { Table, TableColumn } from '@backstage/core-components'; + +import { Box } from '@material-ui/core'; +import LanguageIcon from '@material-ui/icons/Language'; +import React from 'react'; + +type SystemIcon = { + key: string; + icon: IconComponent; +}; + +const columns: TableColumn[] = [ + { + title: 'Icon', + field: 'icon', + width: 'auto', + render: (row: Partial) => ( + + {row.icon ? : } + + ), + }, + { + title: 'Key', + field: 'key', + width: 'auto', + defaultSort: 'asc', + }, +]; + +export const UserSettingsAvailableIconsTable = () => { + const app = useApp(); + const systemIcons = app.getSystemIcons(); + const systemIconList: SystemIcon[] = []; + for (const icon in systemIcons) { + if (Object.prototype.hasOwnProperty.call(systemIcons, icon)) { + const sysIcon = { + key: icon, + icon: systemIcons[icon], + }; + systemIconList.push(sysIcon); + } + } + + return ( + + ); +}; diff --git a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx index db7fdd7be6..e3a9567164 100644 --- a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx @@ -18,6 +18,7 @@ import React from 'react'; import { UserSettingsProfileCard } from './UserSettingsProfileCard'; import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard'; import { UserSettingsIdentityCard } from './UserSettingsIdentityCard'; +import { UserSettingsAvailableIconsTable } from './UserSettingsAvailableIconsTable'; export const UserSettingsGeneral = () => { return ( @@ -31,6 +32,9 @@ export const UserSettingsGeneral = () => { + + + ); }; From 744fea158bed9d1fd675a93ca0edf35ebd5c8109 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Mon, 18 Jul 2022 08:19:45 -0500 Subject: [PATCH 2/6] Added changeset Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .changeset/hungry-dogs-agree.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/hungry-dogs-agree.md diff --git a/.changeset/hungry-dogs-agree.md b/.changeset/hungry-dogs-agree.md new file mode 100644 index 0000000000..a8c5b24c25 --- /dev/null +++ b/.changeset/hungry-dogs-agree.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-app-api': patch +'@backstage/plugin-user-settings': patch +--- + +Added Table with List of Available Icons and Documentation on Usage From fc3e132f314421dd62e45c61d7117e5fe210b82e Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Tue, 26 Jul 2022 07:44:20 -0500 Subject: [PATCH 3/6] Fixed API Report Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- packages/core-app-api/api-report.md | 3 +++ packages/core-plugin-api/api-report.md | 29 +++++++++++++++++++---- packages/core-plugin-api/src/app/types.ts | 1 + 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/core-app-api/api-report.md b/packages/core-app-api/api-report.md index beb0d11201..dde4d26364 100644 --- a/packages/core-app-api/api-report.md +++ b/packages/core-app-api/api-report.md @@ -157,6 +157,9 @@ export type AppConfigLoader = () => Promise; export type AppContext = { getPlugins(): BackstagePlugin[]; getSystemIcon(key: string): IconComponent | undefined; + getSystemIcons(): AppIcons & { + [key in string]: IconComponent; + }; getComponents(): AppComponents; }; diff --git a/packages/core-plugin-api/api-report.md b/packages/core-plugin-api/api-report.md index e0686596aa..facb4235c6 100644 --- a/packages/core-plugin-api/api-report.md +++ b/packages/core-plugin-api/api-report.md @@ -155,6 +155,31 @@ export type AppContext = { getComponents(): AppComponents; }; +// @public +export type AppIcons = { + 'kind:api': IconComponent_2; + 'kind:component': IconComponent_2; + 'kind:domain': IconComponent_2; + 'kind:group': IconComponent_2; + 'kind:location': IconComponent_2; + 'kind:system': IconComponent_2; + 'kind:user': IconComponent_2; + brokenImage: IconComponent_2; + catalog: IconComponent_2; + chat: IconComponent_2; + dashboard: IconComponent_2; + docs: IconComponent_2; + email: IconComponent_2; + github: IconComponent_2; + group: IconComponent_2; + help: IconComponent_2; + scaffolder: IconComponent_2; + search: IconComponent_2; + techdocs: IconComponent_2; + user: IconComponent_2; + warning: IconComponent_2; +}; + // @public export type AppTheme = { id: string; @@ -783,8 +808,4 @@ export function withApis(apis: TypesToApiRefs):

( (props: React_2.PropsWithChildren>): JSX.Element; displayName: string; }; - -// Warnings were encountered during analysis: -// -// /backstage/dist-types/packages/core-app-api/src/app/types.d.ts:277:5 - (ae-forgotten-export) The symbol "AppIcons" needs to be exported by the entry point index.d.ts ``` diff --git a/packages/core-plugin-api/src/app/types.ts b/packages/core-plugin-api/src/app/types.ts index 2a71eda1f4..17623048e2 100644 --- a/packages/core-plugin-api/src/app/types.ts +++ b/packages/core-plugin-api/src/app/types.ts @@ -24,4 +24,5 @@ export type { ErrorBoundaryFallbackProps, AppComponents, AppContext, + AppIcons, } from '../../../core-app-api/src/app/types'; From e87663dfdcc9e673df5f81ff4bb4cb9e5290aacc Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Tue, 26 Jul 2022 08:13:01 -0500 Subject: [PATCH 4/6] Removed item and updated changeset Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .changeset/hungry-dogs-agree.md | 4 +- .../UserSettingsAvailableIconsTable.tsx | 73 ------------------- .../General/UserSettingsGeneral.tsx | 4 - 3 files changed, 2 insertions(+), 79 deletions(-) delete mode 100644 plugins/user-settings/src/components/General/UserSettingsAvailableIconsTable.tsx diff --git a/.changeset/hungry-dogs-agree.md b/.changeset/hungry-dogs-agree.md index a8c5b24c25..07d7e41483 100644 --- a/.changeset/hungry-dogs-agree.md +++ b/.changeset/hungry-dogs-agree.md @@ -1,6 +1,6 @@ --- '@backstage/core-app-api': patch -'@backstage/plugin-user-settings': patch +'@backstage/core-plugin-api': patch --- -Added Table with List of Available Icons and Documentation on Usage +Added `getSystemIcons()` function to the `AppManager` that will pull a list of all the icons that have been registered in the App. diff --git a/plugins/user-settings/src/components/General/UserSettingsAvailableIconsTable.tsx b/plugins/user-settings/src/components/General/UserSettingsAvailableIconsTable.tsx deleted file mode 100644 index d0e6034c66..0000000000 --- a/plugins/user-settings/src/components/General/UserSettingsAvailableIconsTable.tsx +++ /dev/null @@ -1,73 +0,0 @@ -/* - * Copyright 2022 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { IconComponent, useApp } from '@backstage/core-plugin-api'; -import { Table, TableColumn } from '@backstage/core-components'; - -import { Box } from '@material-ui/core'; -import LanguageIcon from '@material-ui/icons/Language'; -import React from 'react'; - -type SystemIcon = { - key: string; - icon: IconComponent; -}; - -const columns: TableColumn[] = [ - { - title: 'Icon', - field: 'icon', - width: 'auto', - render: (row: Partial) => ( - - {row.icon ? : } - - ), - }, - { - title: 'Key', - field: 'key', - width: 'auto', - defaultSort: 'asc', - }, -]; - -export const UserSettingsAvailableIconsTable = () => { - const app = useApp(); - const systemIcons = app.getSystemIcons(); - const systemIconList: SystemIcon[] = []; - for (const icon in systemIcons) { - if (Object.prototype.hasOwnProperty.call(systemIcons, icon)) { - const sysIcon = { - key: icon, - icon: systemIcons[icon], - }; - systemIconList.push(sysIcon); - } - } - - return ( -

- ); -}; diff --git a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx index e3a9567164..db7fdd7be6 100644 --- a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx @@ -18,7 +18,6 @@ import React from 'react'; import { UserSettingsProfileCard } from './UserSettingsProfileCard'; import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard'; import { UserSettingsIdentityCard } from './UserSettingsIdentityCard'; -import { UserSettingsAvailableIconsTable } from './UserSettingsAvailableIconsTable'; export const UserSettingsGeneral = () => { return ( @@ -32,9 +31,6 @@ export const UserSettingsGeneral = () => { - - - ); }; From f0447ee755e1e1c0571c4dd22fd6f31c3db4b031 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Wed, 10 Aug 2022 09:07:23 -0500 Subject: [PATCH 5/6] Updates based on initial feedback Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .changeset/hungry-dogs-agree.md | 2 +- packages/core-app-api/api-report.md | 4 +-- packages/core-app-api/src/app/AppManager.tsx | 5 ++-- packages/core-app-api/src/app/types.ts | 2 +- packages/core-plugin-api/api-report.md | 29 +------------------- packages/core-plugin-api/src/app/types.ts | 1 - 6 files changed, 6 insertions(+), 37 deletions(-) diff --git a/.changeset/hungry-dogs-agree.md b/.changeset/hungry-dogs-agree.md index 07d7e41483..b111b6e463 100644 --- a/.changeset/hungry-dogs-agree.md +++ b/.changeset/hungry-dogs-agree.md @@ -3,4 +3,4 @@ '@backstage/core-plugin-api': patch --- -Added `getSystemIcons()` function to the `AppManager` that will pull a list of all the icons that have been registered in the App. +Added `getSystemIcons()` function to the `AppContext` available through `useApp` that will pull a list of all the icons that have been registered in the App. diff --git a/packages/core-app-api/api-report.md b/packages/core-app-api/api-report.md index dde4d26364..3cc1f4a8a8 100644 --- a/packages/core-app-api/api-report.md +++ b/packages/core-app-api/api-report.md @@ -157,9 +157,7 @@ export type AppConfigLoader = () => Promise; export type AppContext = { getPlugins(): BackstagePlugin[]; getSystemIcon(key: string): IconComponent | undefined; - getSystemIcons(): AppIcons & { - [key in string]: IconComponent; - }; + getSystemIcons(): Record; getComponents(): AppComponents; }; diff --git a/packages/core-app-api/src/app/AppManager.tsx b/packages/core-app-api/src/app/AppManager.tsx index 41c57afb98..f36d37f796 100644 --- a/packages/core-app-api/src/app/AppManager.tsx +++ b/packages/core-app-api/src/app/AppManager.tsx @@ -71,7 +71,6 @@ import { AppComponents, AppConfigLoader, AppContext, - AppIcons, AppOptions, BackstageApp, SignInPageProps, @@ -154,7 +153,7 @@ class AppContextImpl implements AppContext { return this.app.getSystemIcon(key); } - getSystemIcons(): AppIcons & { [key in string]: IconComponent } { + getSystemIcons(): Record { return this.app.getSystemIcons(); } @@ -199,7 +198,7 @@ export class AppManager implements BackstageApp { return this.icons[key]; } - getSystemIcons(): AppIcons & { [key in string]: IconComponent } { + getSystemIcons(): Record { return this.icons; } diff --git a/packages/core-app-api/src/app/types.ts b/packages/core-app-api/src/app/types.ts index b196e2cf90..39bf9c0554 100644 --- a/packages/core-app-api/src/app/types.ts +++ b/packages/core-app-api/src/app/types.ts @@ -331,7 +331,7 @@ export type AppContext = { /** * Get a list of common and custom icons for this app. */ - getSystemIcons(): AppIcons & { [key in string]: IconComponent }; + getSystemIcons(): Record; /** * Get the components registered for various purposes in the app. diff --git a/packages/core-plugin-api/api-report.md b/packages/core-plugin-api/api-report.md index facb4235c6..87fc344a02 100644 --- a/packages/core-plugin-api/api-report.md +++ b/packages/core-plugin-api/api-report.md @@ -149,37 +149,10 @@ export type AppComponents = { export type AppContext = { getPlugins(): BackstagePlugin_2[]; getSystemIcon(key: string): IconComponent_2 | undefined; - getSystemIcons(): AppIcons & { - [key in string]: IconComponent_2; - }; + getSystemIcons(): Record; getComponents(): AppComponents; }; -// @public -export type AppIcons = { - 'kind:api': IconComponent_2; - 'kind:component': IconComponent_2; - 'kind:domain': IconComponent_2; - 'kind:group': IconComponent_2; - 'kind:location': IconComponent_2; - 'kind:system': IconComponent_2; - 'kind:user': IconComponent_2; - brokenImage: IconComponent_2; - catalog: IconComponent_2; - chat: IconComponent_2; - dashboard: IconComponent_2; - docs: IconComponent_2; - email: IconComponent_2; - github: IconComponent_2; - group: IconComponent_2; - help: IconComponent_2; - scaffolder: IconComponent_2; - search: IconComponent_2; - techdocs: IconComponent_2; - user: IconComponent_2; - warning: IconComponent_2; -}; - // @public export type AppTheme = { id: string; diff --git a/packages/core-plugin-api/src/app/types.ts b/packages/core-plugin-api/src/app/types.ts index 17623048e2..2a71eda1f4 100644 --- a/packages/core-plugin-api/src/app/types.ts +++ b/packages/core-plugin-api/src/app/types.ts @@ -24,5 +24,4 @@ export type { ErrorBoundaryFallbackProps, AppComponents, AppContext, - AppIcons, } from '../../../core-app-api/src/app/types'; From 0094d8ae943cefde2f56266192ee0a5bf0467d16 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Wed, 17 Aug 2022 14:08:09 -0500 Subject: [PATCH 6/6] Refactor icon section based on recent changes Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- docs/getting-started/app-custom-theme.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index fc39412d61..25131f1c91 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -273,18 +273,22 @@ const LogoFull = () => { }; ``` -## Custom Icons +## Icons + +So far you've seen how to create your own theme and add your own logo, in the following sections you'll be shown how to override the existing icons and how to add more icons + +### Custom Icons You can also customize the Project's _default_ icons. You can change the following [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx). -### Requirements +#### Requirements - Files in `.svg` format - React components created for the icons -### Create React Component +#### Create React Component In your front-end application, locate the `src` folder. We suggest creating the `assets/icons` directory and `CustomIcons.tsx` file. @@ -309,7 +313,7 @@ export const ExampleIcon = (props: SvgIconProps) => ( ); ``` -### Using the custom icon +#### Using the custom icon Supply your custom icon in `packages/app/src/App.tsx` @@ -338,9 +342,9 @@ const app = createApp({ [...] ``` -## Adding Icons +### Adding Icons -You can add more icons, if the [default icons](https://github.com/backstage/backstage/blob/8d83f5cb4fa0544b0f9160ac22bd5f0f1fe285c6/packages/app-defaults/src/defaults/icons.tsx#L38) do not fit your needs, so that they can be used in other places like for Links in your entities. For this example we'll be using icons from[Material UI](https://v4.mui.com/components/material-icons/) and specifically the `AlarmIcon`. Here's how to do that: +You can add more icons, if the [default icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx) do not fit your needs, so that they can be used in other places like for Links in your entities. For this example we'll be using icons from[Material UI](https://v4.mui.com/components/material-icons/) and specifically the `AlarmIcon`. Here's how to do that: 1. First you will want to open your `App.tsx` in `/packages/app/src` 2. Then you want to import your icon, add this to the rest of your imports: `import AlarmIcon from '@material-ui/icons/Alarm';`