From cdea98f2a1180d997dad947c5e7c98aab2f5e9b6 Mon Sep 17 00:00:00 2001 From: Paulo Peixoto <72894267+padupe@users.noreply.github.com> Date: Fri, 5 Aug 2022 08:59:47 -0300 Subject: [PATCH] Adjustments based on @awanlin suggestion. Signed-off-by: Paulo Peixoto <72894267+padupe@users.noreply.github.com> --- docs/getting-started/app-custom-theme.md | 70 ++++++------------------ 1 file changed, 16 insertions(+), 54 deletions(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 25e5ff9237..97d57540a9 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -277,54 +277,7 @@ const LogoFull = () => { You can also customize the Project's _default_ icons. -We can change the following icons: - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Icons
brokenImagechat
dashboarddocs
emailgithub
grouphelp
"kind:api""kind:component"
"kind:domain""kind:group"
"kind:location""kind:system"
"kind:user"scaffolder
searchtechdocs
userwarning
-
+We can change the following [icons](https://github.com/backstage/backstage/blob/master/packages/app-defaults/src/defaults/icons.tsx). ### Requirements @@ -338,15 +291,24 @@ In your front-end application, locate the `src` folder. We suggest creating the 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 React from 'react'; -import ExampleSVG from './icons/example.svg'; +import { SvgIcon, SvgIconProps } from '@material-ui/core'; -export const ExampleIcon = () => { - return ; -}; +import React from 'react'; + +export const HeaderIcon = (props: SvgIconProps) => ( + + + +); ``` ### Using the custom icon