Logo

Display your logo with pride. The Logo component renders a logo image. It allows toggling between the brand color or a white logo and can display either the full logo or the logo mark.

You should replace the SVG files in the component folder with your own logo images.

Usage

import { Logo } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <div>
      <Logo/>
    </div>
  );
}

Props

Prop	Description	Required	Value
className	custom style	optional	SCSS or Tailwind
color	toggle between brand color or white logo	optional	string, default: white
mark	use a logo mark instead of the full logo	optional	boolean, default: false

Notes

• The Logo component uses the AuthContext to check for dark mode and force the white logo if dark mode is enabled.

• The color prop toggles between the brand color and the white logo.

• The mark prop determines whether to display the logo mark or the full logo.

• The className prop allows for custom styling to be applied.