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] 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 |
+
+
+ | brokenImage |
+ chat |
+
+ dashboard |
+ docs |
+
+
+ | email |
+ github |
+
+
+ | group |
+ help |
+
+
+ | "kind:api" |
+ "kind:component" |
+
+
+ | "kind:domain" |
+ "kind:group" |
+
+
+ | "kind:location" |
+ "kind:system" |
+
+
+ | "kind:user" |
+ scaffolder |
+
+
+ | search |
+ techdocs |
+
+
+ | user |
+ warning |
+
+
+
;
+};
+```
+
+### 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