# 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

```javascript
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.