Logo and Website Title

How to change the Logo and the Website Title of react refine, i am using material UI with vite

2 Replies

Hi @George Mohsen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the logo and title in your Refine project, you can use the AuthPage and ThemedTitle components. For the title, you can use the title prop of the AuthPage component. By default, the title is "Refine Project". You can change it by passing a new title to the title prop. Here's an example:

import { AuthPage } from "@refinedev/mui";  

const MyLoginPage = () => {  
 return <AuthPage type="login" title={<h1>My New Title</h1>} />;  
};

import { AuthPage } from "@refinedev/mui";  

const MyLoginPage = () => {  
 return <AuthPage type="login" title={<h1>My New Title</h1>} />;  
};

You can also customize the title with the ThemedTitle component:

import { AuthPage, ThemedTitle } from "@refinedev/mui";  

const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={  
 <ThemedTitleV2  
 title="My New Title"  
 icon={<img src="<https://refine.dev/img/logo.png"> />}  
 />  
 }  
 />  
 );  
};

import { AuthPage, ThemedTitle } from "@refinedev/mui";  

const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={  
 <ThemedTitleV2  
 title="My New Title"  
 icon={<img src="<https://refine.dev/img/logo.png"> />}  
 />  
 }  
 />  
 );  
};

In the above example, replace "My New Title" with your desired title and "<https://refine.dev/img/logo.png"> with the URL of your logo. For the logo, you can use the icon prop of the ThemedTitle component. By default, the icon is the Refine logo. You can change it by passing a new icon to the icon prop. Here's an example:

import { ThemedTitleV2 } from "@refinedev/mui";  
import { MyLargeIcon, MySmallIcon } from "./MyIcon";  

const MyTitle = ({ collapsed }) => (  
 <ThemedTitleV2  
 collapsed={collapsed}  
 icon={collapsed ? <MySmallIcon /> : <MyLargeIcon />}  
 text="My Project"  
 />  
);

import { ThemedTitleV2 } from "@refinedev/mui";  
import { MyLargeIcon, MySmallIcon } from "./MyIcon";  

const MyTitle = ({ collapsed }) => (  
 <ThemedTitleV2  
 collapsed={collapsed}  
 icon={collapsed ? <MySmallIcon /> : <MyLargeIcon />}  
 text="My Project"  
 />  
);

In the above example, replace MyLargeIcon and MySmallIcon with your desired icons. Please note that these examples are for Material-UI. If you're using a different UI library, you might need to adjust the code accordingly. For more information, you can refer to the following documentation pages: - AuthPage component (https://refine.dev/docs/ui-integrations/material-ui/components/auth-page#title) - ThemedTitle component (https://refine.dev/docs/ui-integrations/material-ui/components/themed-layout#title) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@1083046721392750612> kapa.ai is still learning and improving, please let us know how it did by reacting below