diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 97d57540a9..48d40761da 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -277,21 +277,19 @@ const LogoFull = () => { You can also customize the Project's _default_ icons. -We can change the following [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx). +You can change the following [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx). ### Requirements -- Files in `.svg` format; +- Files in `.svg` format - React components created for the icons ### Create React Component -In your front-end application, locate the `src` folder. We suggest creating the `assets/icons` directory. +In your front-end application, locate the `src` folder. We suggest creating the `assets/icons` directory and `CustomIcons.tsx` file. -In the `icons` directory, upload the files in `.svg` format. - -In the `assets` directory, you can create the `customIcons.tsx` file. > Another example [here](https://github.com/backstage/backstage/blob/master/plugins/azure-devops/src/components/AzurePipelinesIcon/AzurePipelinesIcon.tsx), if you want to ensure proper behavior in light and dark themes. + ```tsx // customIcons.tsx import { SvgIcon, SvgIconProps } from '@material-ui/core'; @@ -301,11 +299,11 @@ import React from 'react'; export const HeaderIcon = (props: SvgIconProps) => ( ); @@ -313,11 +311,7 @@ export const HeaderIcon = (props: SvgIconProps) => ( ### Using the custom icon -In your front-end application, locate the `src/components` folder. - -You will find the `App.tsx` file. - -The `app` constant, instantiates the `createApp` function, in this constant we will use the "icons" parameter that receives an object. +Supply your custom icon in `packages/app/src/App.tsx` ```diff