From 8da380b0aef17b6c1bef8cc8900c640d786f9b02 Mon Sep 17 00:00:00 2001 From: Paulo Peixoto <72894267+padupe@users.noreply.github.com> Date: Thu, 4 Aug 2022 11:10:00 -0300 Subject: [PATCH 1/4] Update app-cusom-theme.md Added documentation for using custom icons. Signed-off-by: Paulo Peixoto <72894267+padupe@users.noreply.github.com> --- docs/getting-started/app-custom-theme.md | 109 +++++++++++++++++++++++ 1 file changed, 109 insertions(+) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index da4f10a64b..25e5ff9237 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -273,6 +273,115 @@ const LogoFull = () => { }; ``` +## Custom Icons + +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
+
+ +### Requirements + +- 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 the `icons` directory, upload the files in `.svg` format. + +In the `assets` directory, you can create the `customIcons.tsx` file. + +```tsx +// customIcons.tsx +import React from 'react'; +import ExampleSVG from './icons/example.svg'; + +export const ExampleIcon = () => { + return ; +}; +``` + +### 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. + +```diff + ++ import { ExampleIcon } from './assets/customIcons' + +[...] + +const app = createApp({ + apis, + components: { + [...] + }, + themes: [ + [...] + ], ++ icons: { ++ github: ExampleIcon, ++ }, + bindRoutes({ bind }) { + [...] + } +}) + +[...] +``` + ## Custom Homepage In addition to a custom theme, a custom logo, you can also customize the 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 2/4] 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 From 168bb7acdc517a04d6b79fa687eaec466a39c435 Mon Sep 17 00:00:00 2001 From: Paulo Peixoto <72894267+padupe@users.noreply.github.com> Date: Wed, 10 Aug 2022 08:05:44 -0300 Subject: [PATCH 3/4] Update app-custhome-theme.md After suggestions @jhaals Signed-off-by: Paulo Peixoto <72894267+padupe@users.noreply.github.com> --- docs/getting-started/app-custom-theme.md | 26 +++++++++--------------- 1 file changed, 10 insertions(+), 16 deletions(-) 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 From cfb4a12c684719a7a5d059ea452654c909c6c108 Mon Sep 17 00:00:00 2001 From: Paulo Peixoto <72894267+padupe@users.noreply.github.com> Date: Wed, 10 Aug 2022 11:47:33 -0300 Subject: [PATCH 4/4] fix: change HeaderIcon for ExampleIcon. Signed-off-by: Paulo Peixoto <72894267+padupe@users.noreply.github.com> --- docs/getting-started/app-custom-theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md index 48d40761da..9ca82d01a1 100644 --- a/docs/getting-started/app-custom-theme.md +++ b/docs/getting-started/app-custom-theme.md @@ -296,7 +296,7 @@ import { SvgIcon, SvgIconProps } from '@material-ui/core'; import React from 'react'; -export const HeaderIcon = (props: SvgIconProps) => ( +export const ExampleIcon = (props: SvgIconProps) => (