Angular icon component 예시

<ion-icon
  [ngClass]="class"
  [src]="name ? 'https://api.iconify.design/' + name + '.svg' : src"
/>

1. 템플릿

 

 

import { Component, HostBinding, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-icon',
  standalone: true,
  imports: [CommonModule, IonicModule],
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.scss'],
})
export class IconComponent {
  @Input() name?: string | undefined;
  @Input() src?: string | undefined;
  @Input() class?: string | undefined;

  @HostBinding('class') _class = 'flex';
}

2. name 과 src 를 주입 받아 사용합니다.

3. class 이름을 주입 받아 tailwind CSS 로 활용합니다.

 

 

<app-icon
          name="ic:baseline-upload-file"
          class="w-8 h-8 text-primary"
        ></app-icon>

4. 다른 컴포넌트에서 아이콘 컴포넌트를 사용하는 예시