SVG Sprite Icons in Storybook

assets/images/icons/svg-icon-sprite.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-search" viewBox="0 0 14 14">
      <path d="M13.3642 10.4131L11.9063 8.9199C11.5927 8.62179 11.1971 8.42427 10.7703 " />           
    </symbol>

    <symbol id="icon-arrow-right" viewBox="0 0 14 14">
      <path
      stroke="currentColor"
      d="M1.16675 6.99984H12.8334M12.8334 6.99984L7.00008 1.1665M12.8334 6.99984L7.00008 12.8332"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    </symbol>
  </defs>
</svg>

Icon component

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'app-icon',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app-icon.component.html',
  styleUrl: './app-icon.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppIconComponent {
  @Input() icon: string | undefined;
  @Input() size: number | undefined;
}

Icon template

<svg [attr.height]="size" [attr.width]="size">
  <use [attr.href]="'images/icons/svg-icon-sprite.svg#' + icon"></use>
</svg>

Icon styles

:host {
  display: flex;

  use {
    display: block;
    height: 100%;
    width: 100%;
    fill: currentColor;
  }
}

Button component

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { ButtonGroup, ButtonIcon, ButtonState, ButtonType } from '@app/lib/components/app-button/app-button.enum';

import { appIconComponent } from '../app-icon/app-icon.component';
import { appIconsComponent } from '../app-icons/app-icons.component';

@Component({
  selector: 'app-app-button',
  standalone: true,
  imports: [CommonModule, appIconsComponent, appIconComponent],
  templateUrl: './app-button.component.html',
  styleUrl: './app-button.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class appButtonComponent {
  @Input() label = 'Button';

  @Input() buttonType: ButtonType = ButtonType.PRIMARY;
  @Input() buttonGroup: ButtonGroup = ButtonGroup.DEFAULT;
  @Input() buttonIcon: ButtonIcon = ButtonIcon.DEFAULT;
  @Input() buttonState: ButtonState = ButtonState.DEFAULT;

  @Output() buttonClick = new EventEmitter<Event>();

  // Exponáljuk a ButtonIcon enumot, hogy használni tudjuk a template-ben
  ButtonIcon = ButtonIcon;
  ButtonType = ButtonType;
  ButtonState = ButtonState;

  public get classes(): string[] {
    const typeClass = `app-btn-${this.buttonType}`;
    const groupClass = `app-btn-${this.buttonGroup}`;
    const iconClass = `app-btn-${this.buttonIcon}`;
    const stateClass = `app-btn-${this.buttonState}`;
    return ['app-btn', typeClass, groupClass, iconClass, stateClass];
  }
}

Template where you want to use the icon

<app-icon [icon]="'icon-arrow-right'" [size]="14"></app-icon>