@engie-group/fluid-design-system-angular/src/components/icon/icon.component.ts

Fluid Design System Angular

import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
import {IconBaseComponent} from '../icon-base/icon-base.component';
import {IconColor, IconSize} from './icon.model';

@Component({
  selector: 'nj-icon',
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [IconBaseComponent]
})
export class IconComponent extends IconBaseComponent {

  private ICON_MATERIAL_CLASS = 'nj-icon-material';

  /**
   * Icon size
   */
  @Input() size: IconSize = 'md';

  /**
   * Icon variant theme
   */
  @Input() variant: IconColor;

  protected getClassName(): string {
    const sizeClass = this.size ? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(this.size, 'size-inherit')}` : '';
    const variantClass = this.variant ? `${this.ICON_MATERIAL_CLASS}--${this.classModifier(this.variant, 'color-inherit')}` : '';
    const className = this.className ? this.className : '';
    return `${this.ICON_MATERIAL_CLASS} ${sizeClass} ${variantClass} ${className}`;
  }

  private classModifier<T extends string, U>(
    variant: T,
    inheritClass: U
  ): Exclude<T, 'inherit'> | U {
    switch (variant) {
      case 'inherit':
        return inheritClass;
      default:
        return variant as Exclude<T, 'inherit'>;
    }
  }
}