improve: performance

src/app/home/home.component.html

@@ -14,18 +14,16 @@
         <div class="hero-contact-block">
           <p class="hero-contact-title">{{ content().home.contactTitle }}</p>
           <div id="contact-links" class="contact-area hero-contact-area">
-            <a [href]="contactMailHref" aria-label="Send mail"><fa-icon class="fab" [icon]="faEnvelope" size="lg"></fa-icon></a>
+            <a [href]="contactMailHref" aria-label="Send mail"><app-icon [icon]="envelopeIcon" size="lg"></app-icon></a>
             <a href="tel:{{ global.hrefContactPhone }}" aria-label="Call phone number"
-              ><fa-icon class="fab" [icon]="faPhone" size="lg"></fa-icon
+              ><app-icon [icon]="phoneIcon" size="lg"></app-icon
             ></a>
             <a href="https://discord.com/users/860206216893693973" aria-label="Discord profile"
-              ><fa-icon class="fab" [icon]="faDiscord" size="lg"></fa-icon
-            ></a>
-            <a href="https://github.com/fraujulian" aria-label="GitHub profile"
-              ><fa-icon class="fab" [icon]="faGithub" size="lg"></fa-icon
+              ><app-icon [icon]="discordIcon" size="lg"></app-icon
             ></a>
+            <a href="https://github.com/fraujulian" aria-label="GitHub profile"><app-icon [icon]="githubIcon" size="lg"></app-icon></a>
             <a href="https://www.linkedin.com/in/julian-lechner-98b377356/" aria-label="LinkedIn profile"
-              ><fa-icon class="fab" [icon]="faLinkedin" size="lg"></fa-icon
+              ><app-icon [icon]="linkedinIcon" size="lg"></app-icon
             ></a>
           </div>
         </div>
@@ -90,7 +88,7 @@
       <div class="story-detail">
         <button class="detail-toggle" type="button" (click)="toggleBio()">
           <span>{{ isLongBioShown ? content().home.detailToggleClose : content().home.detailToggleOpen }}</span
-          ><fa-icon [icon]="isLongBioShown ? faArrowDown : faArrowRight"></fa-icon>
+          ><app-icon [icon]="isLongBioShown ? arrowDownIcon : arrowRightIcon"></app-icon>
         </button>
         @if (isLongBioMounted) {
           <div class="detail-panel" [class.detail-panel-enter]="isLongBioShown" [class.detail-panel-leave]="!isLongBioShown">

src/app/home/home.component.ts

@@ -8,10 +8,6 @@ import {
   signal,
 } from '@angular/core';
 import { NgOptimizedImage } from '@angular/common';
-import { faArrowRight, faArrowDown, faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons';
-import { faDiscord, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
-import type { IconDefinition } from '@fortawesome/angular-fontawesome';
-import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { interval } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -23,11 +19,21 @@ import type {
 } from '../../languages/language.types';
 import { FooterComponent } from '../footer/footer.component';
 import { LanguageService } from '../services/language.service';
+import { IconComponent } from '../shared/icon/icon.component';
+import {
+  arrowDownIcon,
+  arrowRightIcon,
+  discordIcon,
+  envelopeIcon,
+  githubIcon,
+  linkedinIcon,
+  phoneIcon,
+} from '../shared/icon/icons';
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [FooterComponent, FaIconComponent, NgOptimizedImage],
+  imports: [FooterComponent, IconComponent, NgOptimizedImage],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -65,13 +71,13 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   protected readonly global = global;
   protected readonly age = this.calculateAge(global.birthdate);
   protected readonly contactMailHref = `mailto:${global.contactMail}`;
-  protected readonly faArrowRight: IconDefinition = faArrowRight;
-  protected readonly faArrowDown: IconDefinition = faArrowDown;
-  protected readonly faEnvelope: IconDefinition = faEnvelope;
-  protected readonly faPhone: IconDefinition = faPhone;
-  protected readonly faDiscord: IconDefinition = faDiscord;
-  protected readonly faGithub: IconDefinition = faGithub;
-  protected readonly faLinkedin: IconDefinition = faLinkedin;
+  protected readonly arrowRightIcon = arrowRightIcon;
+  protected readonly arrowDownIcon = arrowDownIcon;
+  protected readonly envelopeIcon = envelopeIcon;
+  protected readonly phoneIcon = phoneIcon;
+  protected readonly discordIcon = discordIcon;
+  protected readonly githubIcon = githubIcon;
+  protected readonly linkedinIcon = linkedinIcon;
 
   private readonly isLongBioShownState = signal(false);
   private readonly isLongBioMountedState = signal(false);