Logo Component

The LogoComponent is a lightweight and flexible component for displaying a logo. It supports dynamic theming by switching between light and dark logos based on the application's theme. Developers can customize the logo's appearance, including size, alt text, and image paths.

How to use the component in your app :

1. import the component :

import {LogoComponent} from '@tradinos/cms-frontend-layout';

1. The selector for component , like it :

<lib-logo>
</lib-logo>

3. Dynamically Switch Logos Based on Theme :

The LogoComponent integrates with the ThemeService to dynamically determine the logo path. It automatically uses the darkLogoPath or lightLogoPath based on the active theme.

Features

• Theming Support: Automatically switches between light and dark logo paths based on the current theme.

• Customizable: Allows developers to set logo dimensions (height and width) and alternative text (alt).

• Integration with Configuration: Supports logo configuration via LIB_LAYOUT_CONFIG.

Inputs

Input	Type	Description
darkLogoPath	string	Path to the logo image for dark themes.
lightLogoPath	string	Path to the logo image for light themes.
alt	string	The alternative text for the logo (default: 'logo').
height	string	The height of the logo in pixels (default: '35').
width	string	The width of the logo in pixels (default: '35').

Methods

getLogoPath(theme: string): string

• The getLogoPath method allows you to dynamically fetch the appropriate logo based on the current theme.

• Parameters:

  • theme: A string representing the current theme (e.g., 'dark' or 'light').

Example:

html

<lib-logo
  [darkLogoPath]="'assets/logos/dark-mode-logo.png'"
  [lightLogoPath]="'assets/logos/light-mode-logo.png'"
  [alt]="'My App Logo'"
  [height]="'40'"
  [width]="'40'"
></lib-logo>

Dynamic Configuration

If you’re using a global configuration (e.g., LIB_LAYOUT_CONFIG), the LogoComponent will automatically pick up the logo paths from the configuration file. You can override them by explicitly providing paths via the inputs.

If you're using LIB_LAYOUT_CONFIG, ensure the configuration includes the following:

logoConfig: {
  darkLogoPath: 'assets/images/dark-logo.png', // add your path
  lightLogoPath: 'assets/images/light-logo.png',
}