optimistic-gold•17mo ago

Remove default app icon

Hi guys, This should be simple but I must be missing something. I want to replace the default Icon, so I found where in the application it is being used, but even if comment the code, it still persists in the UI? How can iI remove it? Thanks

5 Replies

kapa.ai•17mo ago

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

kapa.ai•17mo ago

---------------------- To remove the default title and icon in the AuthPage, you can either use the renderContent property or set the title property to false. Here are two examples for Ant Design and Mantine: Ant Design: 1. Using renderContent property:

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

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   renderContent={(content: React.ReactNode) => {  
     return content;  
   }}  
 />  
 );  
};

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

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   renderContent={(content: React.ReactNode) => {  
     return content;  
   }}  
 />  
 );  
};

2. Setting title property to false:

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

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   title={false}  
 />  
 );  
};

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

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   title={false}  
 />  
 );  
};

Mantine: 1. Using renderContent property:

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

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   renderContent={(content: React.ReactNode) => {  
     return content;  
   }}  
 />  
 );  
};

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

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   renderContent={(content: React.ReactNode) => {  
     return content;  
   }}  
 />  
 );  
};

2. Setting title property to false:

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

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   title={false}  
 />  
 );  
};

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

const MyLoginPage = () => {  
 return (  
 <AuthPage  
   type="login"  
   title={false}  
 />  
 );  
};

These examples should help you remove the default title and icon from the AuthPage. Make sure to replace the relevant parts of your code with the examples provided. Sources: - Ant Design AuthPage (https://refine.dev/docs/api-reference/antd/components/antd-auth-page) - Mantine AuthPage (https://refine.dev/docs/api-reference/mantine/components/mantine-auth-page) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

| refine

component from refine is an authentication page that can be used to login, register, forgot password, and update password.

| refine

component from refine is an authentication page that can be used to login, register, forgot password, and update password.

kapa.ai•17mo ago

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

fascinating-indigo•17mo ago

Hey @jaco0670 its the default icon, you can try passing null or any other empty react node. If the result does not satisfy your needs, you can always try swizzling the themedtitlev2 component and customize 🫶

optimistic-gold•17mo ago

Hey @aliemirs thanks for your help 🙂