Change Logo

Overview

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.

Replace the Logo

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.).

Conditional Styling

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 useTags hook. 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.