@switch (variant()) {
  @case ('pi') {
    <i [class]="piClass()" [style.font-size.px]="size()" aria-hidden="true"></i>
  }
  @case ('svg') {
    <svg
      [attr.width]="size()"
      [attr.height]="size()"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2.2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <path [attr.d]="svgPath()" />
    </svg>
  }
  @case ('emoji') {
    <span
      [style.font-size.px]="size()"
      [style.line-height.px]="size()"
      aria-hidden="true"
    >{{ emoji() }}</span>
  }
  @case ('letter') {
    <span
      class="kind-icon__letter"
      [style.font-size.px]="size()"
      [style.line-height.px]="size()"
      aria-hidden="true"
    >{{ letter() }}</span>
  }
}