Visão geral do ícone Blazor

    O componente Blazor Icon permite que você exiba facilmente a fonte ou escolha entre um grande conjunto de ícones SVG predefinidos, mas também oferece a capacidade de criar ícones de fonte personalizados para seu projeto. Beneficiando-se de vários atributos, você pode definir ou alterar o tamanho do ícone em uso ou aplicar estilos diferentes a ele.

    Blazor Icon Example

    Usage

    Antes de usar o IgbIcon, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

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

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbIcon. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

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

    O IgbIcon não contém nenhum ícone por si só. Ele é um canal para exibir quaisquer imagens SVG registradas.

    Adding Icons

    Para registrar uma imagem como um ícone, tudo o que você precisa fazer é chamar um dos dois métodos "register" em um único elemento IgbIcon que permitem adicionar ícones a uma coleção de ícones na sua página.

    O método RegisterIcon permite registrar uma imagem SVG como um ícone de um arquivo externo:

    <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");
     }
  }
}

    O método acima adicionará um ícone chamado search a uma coleção em cache chamada material.

    Para usar o ícone recém-registrado, tudo o que você precisa fazer é passar o nome e a coleção para o elemento IgbIcon:

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

    O segundo método para registrar ícones é passando uma string SVG para o método 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");
     }
  }
}

    Então você o usaria da mesma maneira descrita no exemplo de componente acima.

    Tamanho

    O componente icon suporta três tamanhos de ícone -small, medium (padrão) e large. Para alterar o tamanho do ícone, você pode utilizar a variável CSS--ig-size da seguinte forma:

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

    <IgbIcon Size="@SizableComponentSize.Large">

    Mirrored

    Alguns ícones precisam parecer um pouco diferentes quando usados no modo Right-to-Left (RTL). Por esse motivo, fornecemos um atributo mirrored que, quando definido, inverte o ícone horizontalmente.

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

    Styling

    O componente de ícone pode ser estilizado aplicando estilos diretamente ao elemento IgbIcon;

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

    API References

    Additional Resources