Logo

Customizing the logo

customizing the logo in the template to reflect your brand identity is a straightforward process. The logo component can be found at the project root directory theme.settings.tsx this file 47-65 number line. To update the logo, follow these steps:

Locate the Logo component: Navigate to the theme.settings.tsx. file in your project root directory.
Prepare your Logo: Have your new logo image ready, preferably in SVG format for scalability and performance. If it's not in SVG format, ensure it's in a web-friendly format like PNG or JPG.
Update the Logo Component: In the Logo component, replace the existing SVG with your new logo.

// Replace this SVG with your new logo
export const SiteLogo = ({ className, ...props }: SiteLogoProps) => {
  return (
    <svg
      className={cn("flex-none w-8", className)}
      {...props}
      viewBox="0 0 374 452"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M343.725 415.959L302.576 236.517L272.438 253.516L318.022 409.321L263.353 258.64L216.431 285.104L249.903 415.959H202.586V451.824H371.723L373.952 415.959H343.725Z"
        fill="var(--fallback-s, oklch(var(--s)/1))"
      />
      <path
        d="M104.3 348.348L66.5711 369.628L72.6611 398.794L50.2291 355.018L332.819 216.065L300.327 226.709L248.38 0.175995L124.766 76.781L211.818 46.313L211.981 46.869L267.721 237.39L256.927 240.926L195.749 72.302L157.845 83.094L85.1991 297.183L29.8791 315.305L17.6921 371.018L44.8961 415.96H9.93607L0.0490723 451.824H150.497L151.971 415.96H81.4591L104.3 348.348ZM177.322 132.216L209.135 256.583L126.115 283.779L177.322 132.216Z"
        fill="var(--fallback-p, oklch(var(--p)/1))"
      />
    </svg>
  );
};

Or if you are using an image, replace the existing SVG with your new logo. 4. Customize Logo Text: If your logo includes text, you can customize the text by updating the templateName in theme.settings.tsx file update the appTitle value like so:

const themeSettings: ThemeSettings = {
  // *** App Title
  appTitle: "Your Company Name",
};

You can modify the logo by making changes to the svg and text value. Alternatively, you can use an image as the logo. To achieve this, you would need to replace the svg and text value with an image element.

Add Authentication to Starter-kit Accordion