Angular SVG component

svg.component.html

<svg [ngClass]="{ 'drop-shadow' : dropShadow }" [class]="size ? size : ''" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <use [attr.xlink:href]="link" [attr.href]="link" />
</svg>

svg.component.scss

@import "variables";

svg {
    width: inherit;
    height: inherit;
}

.xs {
    width: $icon-xs-sm;
    height: $icon-xs-sm;
}

.sm {
    width: $icon-sm-sm;
    height: $icon-sm-sm;
}

.md {
    width: $icon-md-sm;
    height: $icon-md-sm;
}

.lg {
    width: $icon-lg-sm;
    height: $icon-lg-sm;
}

@media (min-width: $breakpoint-md) {
    .xs {
        width: $icon-xs-md;
        height: $icon-xs-md;
    }    
    .sm {
        width: $icon-sm-md;
        height: $icon-sm-md;
    }

    .md {
        width: $icon-md-md;
        height: $icon-md-md;
    }

    .lg {
        width: $icon-lg-md;
        height: $icon-lg-md;
    }
}

svg.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { SvgSize } from './svg';

@Component({
  selector: 'ces-svg',
  templateUrl: './svg.component.html',
  styleUrls: ['./svg.component.scss']
})
export class SvgComponent implements OnInit {

  link: string = '';

  @Input() size: SvgSize | undefined;
  @Input() type: string = '';
  @Input() dropShadow: boolean = true;

  constructor() {
  }

  ngOnInit(): void {
    this.link = `/assets/images/svgs/${this.type}.svg#${this.type}`;
  }

}