Blazor 아이콘 개요

    Blazor 아이콘 구성 요소를 사용하면 글꼴을 쉽게 표시하거나 미리 정의된 SVG 아이콘의 큰 세트에서 선택할 수 있을 뿐만 아니라 프로젝트에 대한 사용자 정의 글꼴 아이콘을 만들 수도 있습니다. 여러 속성을 활용하여 사용 중인 아이콘의 크기를 정의하거나 변경하거나 다른 스타일을 적용할 수 있습니다.

    Blazor Icon Example

    Usage

    ​IgbIcon 사용하기 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));

    ​IgbIcon 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    ​IgbIcon 자체적으로 아이콘이 포함되어 있지 않습니다. 등록된 SVG 이미지를 표시하기 위한 통로입니다.

    Adding Icons

    이미지를 아이콘으로 등록하려면 페이지의 아이콘 컬렉션에 아이콘을 추가할 수 있는 단일 IgbIcon 요소에 대해 2개의 "등록" 메소드 중 하나를 호출하기만 하면 됩니다.

    ​RegisterIcon 메서드를 사용하면 SVG 이미지를 외부 파일의 아이콘으로 등록할 수 있습니다.

    <IgbIcon @ref="@IconRef" />

@code {
  private IgbIcon IconRef { get; set; }

  protected override void OnAfterRender(bool firstRender)
  {
     base.OnAfterRender(firstRender);
     if (this.IconRef != null && firstRender)
     {
       this.IconRef.RegisterIcon("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg", "material");
     }
  }
}

    위의 방법은 search 라는 아이콘을 material 이라는 캐시된 컬렉션에 추가합니다.

    새로 등록된 아이콘을 사용하려면 IgbIcon 요소에 이름과 컬렉션을 전달하기만 하면 됩니다.

    IgbIcon IconName="search" Collection="material" />

    아이콘을 등록하는 두 번째 방법은 SVG 문자열을 RegisterIconFromText 메서드에 전달하는 것입니다.

    <IgbIcon @ref="@IconRef" />

@code {
  private IgbIcon IconRef { get; set; }

  protected override void OnAfterRender(bool firstRender)
  {
     base.OnAfterRender(firstRender);
     if (this.IconRef != null && firstRender)
     {
       const string searchIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>";
       this.IconRef.RegisterIconFromText("search", searchIcon, "material");
     }
  }
}

    그런 다음 위의 구성 요소 샘플에 설명된 것과 동일한 방식으로 사용합니다.

    크기

    아이콘 구성 요소는 small, medium (기본값) 및 large 세 가지 아이콘 크기를 지원합니다. 아이콘의 크기를 변경하려면 다음과 같이--ig-size CSS 변수를 활용할 수 있습니다.

    igc-icon {
  --ig-size: var(--ig-size-large);
}

    <IgbIcon Size="@SizableComponentSize.Large">

    Mirrored

    일부 아이콘은 오른쪽에서 왼쪽(RTL) 모드에서 사용될 때 약간 다르게 표시되어야 합니다. 이러한 이유로 우리는 설정 시 아이콘을 수평으로 뒤집는 mirrored 속성을 제공합니다.

    IgbIcon IconName="search" Collection="material" Mirrored="true" />

    Styling

    ​IgbIcon 요소에 직접 스타일을 적용하여 아이콘 구성 요소의 스타일을 지정할 수 있습니다.

    igc-icon {
  --size: 28px;
  color: var(--ig-primary-500);
}

    API References

    Additional Resources