In order to follow this guide, you must use Webiny version 5.21.0 or greater.
- how to replace the default Webiny logo with your own React component
Changing the default logo is a very quick and straightforward process. The
@webiny/app-serverless-cms packages exposes an
AddLogo plugin specifically for this purpose.
Your logo will be visible in two locations: in the top app bar, and in the navigation drawer.
To replace the logo, go to
apps/admin/src/App.tsx in your Webiny project, and apply the following code changes:
You can specify any React element as a value of the
logo prop. The system will simply make sure that it is rendered in the correct place.
It is your responsibility to style your element accordingly (apply width, padding, color, etc.).
Since there are two locations where your logo will be rendered, there’s a neat way to tell where exactly your component is currently being rendered. For this, you’ll have to create a React component which will render your logo.
Notice the use of the
useTagshook. It’s a utility which can come in really handy when you want to tag sections of your React app, so you components can render differently depending on their location in the component hierarchy. This topic will be covered in more details in a dedicated article.
With this, your logo will have different styles applied to it, depending on where it’s being rendered.