site-logo.tsx

import {Component, h, Host, Prop} from '@stencil/core';
import {SiteLogoColor, SiteLogoSize} from '../../../utils/utils';

@Component({
  tag: 'hy-site-logo',
  styleUrl: 'site-logo.scss',
  shadow: true
})
export class SiteLogo {
  @Prop() size: SiteLogoSize = SiteLogoSize.big;
  @Prop() color: SiteLogoColor = SiteLogoColor.white;
  @Prop() label?: string;
  @Prop() url?: string;

  render() {
    return this.url ? (
      <Host class={'hy-site-logo'}>
        <a href={this.url}>
          <hy-icon icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
          <span class={'hy-site-logo__label'} style={{color: this.color}}>
            {this.label}
          </span>
        </a>
      </Host>
    ) : (
      <Host class={'hy-site-logo'}>
        <hy-icon icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
        <span class={'hy-site-logo__label'} style={{color: this.color}}>
          {this.label}
        </span>
      </Host>
    );
  }
}