crude-lavender
crude-lavender6mo ago

change title and icon

This is a really beginner question, but where can I change this?
No description
5 Replies
kapa.ai
kapa.ai6mo ago
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
kapa.ai6mo ago
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
crude-lavender
crude-lavender6mo ago
@kapa.ai how can I edit the icons of the buttons, I want to use tabler icons
kapa.ai
kapa.ai6mo 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
kapa.ai6mo ago
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below