Add custom logo instructions

Signed-off-by: Adam Harvey <adaharve@cisco.com>
2021-05-01 08:26:22 -04:00
parent af7543c0e7
commit 0568748677
1 changed files with 28 additions and 0 deletions
@@ -135,3 +135,31 @@ const themeOptions = createThemeOptions({
  },
 });
 ```
+
+## Custom Logo
+
+In addition to a custom theme, you can also customize the logo displayed at the
+far top left of the site.
+
+In your frontend app, locate `src/components/Root/` folder. You'll find two
+components:
+
+- `LogoFull.tsx` - A larger logo used when the Sidebar navigation is opened.
+- `LogoIcon.tsx` - A smaller logo used when the sidebar navigation is closed.
+
+To replace the images, you can simply replace the relevant code in those
+components with raw SVG definitions.
+
+You can also use another web image format such as PNG by importing it. To do
+this, place your new image into a new subdirectory such as
+`src/components/Root/logo/my-company-logo.png`, and then add this code:
+
+```jsx
+import MyCustomLogoFull from './logo/my-company-logo.png';
+
+//...
+
+const LogoFull = () => {
+  return <img src={MyCustomLogoFull} />;
+};
+```