change title and icon

This is a really beginner question, but where can I change this?

5 Replies

Hi @blackbearftw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can change the title and icon in the AuthPage and ThemedLayout components in Refine. For the AuthPage component, you can use the title prop to change the default title. Here's an example:

import { AuthPage } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return <AuthPage type="login" title={<h1>My Title</h1>} />;  
};

import { AuthPage } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return <AuthPage type="login" title={<h1>My Title</h1>} />;  
};

You can also customize the title with the ThemedTitle component:

import { AuthPage, ThemedTitle } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={<ThemedTitleV2 title="My Title" icon={<img src="<https://refine.dev/img/logo.png"> />} />}  
 />  
 );  
};

import { AuthPage, ThemedTitle } from "@refinedev/antd";  
  
const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={<ThemedTitleV2 title="My Title" icon={<img src="<https://refine.dev/img/logo.png"> />} />}  
 />  
 );  
};

For the ThemedLayout component, you can replace the default ThemedTitle component by passing a custom component to the Title prop. Here's an example:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/antd";  
  
import { MyLargeIcon, MySmallIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Title={({ collapsed }) => (  
 <ThemedTitleV2  
 // collapsed is a boolean value that indicates whether the <Sidebar> is collapsed or not  
 collapsed={collapsed}  
 icon={collapsed ? <MySmallIcon /> : <MyLargeIcon />}  
 text="My Project"  
 />  
 )}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedTitleV2 } from "@refinedev/antd";  
  
import { MyLargeIcon, MySmallIcon } from "./MyIcon";  
  
const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Title={({ collapsed }) => (  
 <ThemedTitleV2  
 // collapsed is a boolean value that indicates whether the <Sidebar> is collapsed or not  
 collapsed={collapsed}  
 icon={collapsed ? <MySmallIcon /> : <MyLargeIcon />}  
 text="My Project"  
 />  
 )}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};

You can find more information in the Refine documentation (https://refine.dev/docs). Please note that the specific import statements (@refinedev/antd, @refinedev/mui, etc.) depend on the UI library you are using with Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

genetic-orange•8mo ago

@kapa.ai how can I edit the icons of the buttons, I want to use tabler icons

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use custom icons in your buttons, you can pass your desired icon component to the icon prop of the button component. For example, if you're using Ant Design's Button component, you can do something like this:

import { Button } from "antd";
import { MyCustomIcon } from "./MyCustomIcon"; // import your custom icon

<Button icon={<MyCustomIcon />} />

import { Button } from "antd";
import { MyCustomIcon } from "./MyCustomIcon"; // import your custom icon

<Button icon={<MyCustomIcon />} />

In the case of Refine's predefined buttons like EditButton, DeleteButton, etc., these components don't directly accept an icon prop. However, you can create your own custom button components that use your desired icons and the functionalities provided by Refine. Here's an example of how you can create a custom delete button with a custom icon:

import { useDelete, useNavigation } from "@pankod/refine";
import { Button } from "antd";
import { MyCustomIcon } from "./MyCustomIcon"; // import your custom icon

const MyDeleteButton = ({ recordItemId }) => {
    const { mutate: deleteItem } = useDelete();
    const { push } = useNavigation();

    const handleDelete = () => {
        deleteItem(recordItemId, {
            onSuccess: () => {
                push("/posts");
            },
        });
    };

    return <Button icon={<MyCustomIcon />} onClick={handleDelete} />;
};

import { useDelete, useNavigation } from "@pankod/refine";
import { Button } from "antd";
import { MyCustomIcon } from "./MyCustomIcon"; // import your custom icon

const MyDeleteButton = ({ recordItemId }) => {
    const { mutate: deleteItem } = useDelete();
    const { push } = useNavigation();

    const handleDelete = () => {
        deleteItem(recordItemId, {
            onSuccess: () => {
                push("/posts");
            },
        });
    };

    return <Button icon={<MyCustomIcon />} onClick={handleDelete} />;
};

You can then use MyDeleteButton in your list view like this:

<Table.Column  
    title="Actions"  
    dataIndex="actions"  
    render={(_, record) => (  
        <MyDeleteButton recordItemId={record.id} />  
    )}  
/>

<Table.Column  
    title="Actions"  
    dataIndex="actions"  
    render={(_, record) => (  
        <MyDeleteButton recordItemId={record.id} />  
    )}  
/>

Please note that you'll need to replace MyCustomIcon with your actual custom icon component from Tabler Icons. For more information, you can refer to the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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