absent-sapphire•10mo ago

Chakra UI change custom image size of title in login form

Hi, how can i change the custom image size in the title of the login form in Chakra UI? my code is <AuthPage type="login" title={<ThemedTitleV2 text="My Title" icon="null" collapsed={false} />} formProps={{ defaultValues: { ...authCredentials, }, }} but there is a viewbox of { 0 0 24 24 } that i am not able to change?

2 Replies

kapa.ai•10mo ago

Hi @Yusseiin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, there isn't a direct way to change the viewBox attribute of the SVG icon used in the ThemedTitleV2 component. The viewBox attribute is typically defined within the SVG itself and is not usually exposed as a prop that can be overridden. However, you can create a custom SVG component with your desired viewBox and use it as the icon prop in the ThemedTitleV2 component. Here's an example:

import { AuthPage, ThemedTitleV2 } from "@refinedev/chakra-ui";  

const MyCustomIcon = () => (
  <svg viewBox="0 0 50 50">
    {/* Your SVG content here */}
  </svg>
);

const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={  
 <ThemedTitleV2  
 title="My Title"  
 icon={<MyCustomIcon />}  
 />  
 }  
 />  
 );  
};

import { AuthPage, ThemedTitleV2 } from "@refinedev/chakra-ui";  

const MyCustomIcon = () => (
  <svg viewBox="0 0 50 50">
    {/* Your SVG content here */}
  </svg>
);

const MyLoginPage = () => {  
 return (  
 <AuthPage  
 type="login"  
 title={  
 <ThemedTitleV2  
 title="My Title"  
 icon={<MyCustomIcon />}  
 />  
 }  
 />  
 );  
};

In this example, MyCustomIcon is a custom SVG component with a viewBox of "0 0 50 50". This component is then used as the icon prop in the ThemedTitleV2 component. Please note that this is a general approach and might need to be adjusted based on your specific SVG and layout requirements. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/chakra-ui/components/auth-page#title). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

Chakra UI change custom image size of title in login form

Did you find this page helpful?