Descripción general de Blazor iconos

    El componente Blazor Icon le permite mostrar fácilmente la fuente o elegir entre un gran conjunto de iconos SVG predefinidos, pero también le ofrece la posibilidad de crear iconos de fuente personalizados para su proyecto. Beneficiándose de una serie de atributos, puede definir o cambiar el tamaño del icono en uso o aplicarle diferentes estilos.

    Blazor Icon Example

    Usage

    Antes de usarlosIgbIcon, debes registrarlo de la siguiente manera:

    // in Program.cs file

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

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbIcon componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

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

    NoIgbIcon contiene ningún icono por sí solo. Es un conducto para mostrar cualquier imagen SVG registrada.

    Adding Icons

    Para registrar una imagen como icono, solo tienes que llamar a uno de los dos métodos de "registro" en un soloIgbIcon elemento que te permiten añadir iconos a una colección de iconos en tu página.

    ElRegisterIcon método permite registrar una imagen SVG como icono desde un archivo 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");
     }
  }
}

    El método anterior añadirá un icono nombradosearch a una colección en caché con nombrematerial de .

    Para usar el icono recién registrado, solo tienes que pasar el nombre y la colección alIgbIcon elemento:

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

    El segundo método para registrar iconos es pasar una cadena SVG alRegisterIconFromText método:

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

    Luego lo usaría de la misma manera que se describe en el ejemplo de componente anterior.

    Tamaño

    El componente de iconos soporta tres tamaños de icono:small-,medium (por defecto), ylarge. Para cambiar el tamaño del icono, puedes utilizar la--ig-size variable CSS de la siguiente manera:

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

    <IgbIcon Size="@SizableComponentSize.Large">

    Mirrored

    Algunos iconos deben verse un poco diferentes cuando se usan en modo de derecha a izquierda (RTL). Por esa razón, proporcionamos unmirrored atributo que, al activarse, invierte el icono horizontalmente.

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

    Styling

    El componente icono puede estilizarse aplicando estilos directamente alIgbIcon elemento;

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

    API References

    Additional Resources