Logo and Website Title

spontaneous-moccasin · 2024-03-21T22:06:57.972Z

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

K

kapa.ai•3/21/24, 10:06 PM

Hi @George Mohsen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•3/21/24, 10:07 PM

----------------------
To change the logo and title in your Refine project, you can use the

AuthPage

AuthPage

AuthPage

AuthPage and

ThemedTitle

ThemedTitle

ThemedTitle

ThemedTitle components.

For the title, you can use the

title

title

prop of the

AuthPage

AuthPage

AuthPage

AuthPage component. By default, the title is "Refine Project". You can change it by passing a new title to the

title

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>} />;  
};

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

ThemedTitle

ThemedTitle

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"> />}  
 />  
 }  
 />  
 );  
};

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"

"My New Title"

"My New Title"

"My New Title" with your desired title and

"<https://refine.dev/img/logo.png"

"<https://refine.dev/img/logo.png"

"<https://refine.dev/img/logo.png"

"<https://refine.dev/img/logo.png"> with the URL of your logo.

For the logo, you can use the

icon

icon

icon

icon prop of the

ThemedTitle

ThemedTitle

ThemedTitle

ThemedTitle component. By default, the icon is the Refine logo. You can change it by passing a new icon to the

icon

icon

icon

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"  
 />  
);

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

MyLargeIcon

MyLargeIcon

MyLargeIcon and

MySmallIcon

MySmallIcon

MySmallIcon

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:

K

kapa.ai•3/21/24, 10:07 PM

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

K

kapa.ai•3/21/24, 10:07 PM

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