Descripción general del icono Blazor

    El componente Blazor Icon le permite mostrar fácilmente la fuente o elegir entre un gran conjunto de íconos SVG predefinidos, pero también le brinda la posibilidad de crear íconos 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.

    Ejemplo de icono Blazor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Blazor y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    Antes de utilizar IgbIcon, debe registrarlo de la siguiente manera:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
    razor

    También necesitará vincular un archivo CSS adicional para aplicar el estilo al componente IgbIcon. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

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

    El IgbIcon no contiene ningún ícono por sí solo. Es un conducto para mostrar cualquier imagen SVG registrada.

    Agregar iconos

    Para registrar una imagen como ícono, todo lo que necesita hacer es llamar a uno de los 2 métodos de "registro" en un único elemento IgbIcon que le permite agregar íconos a una colección de íconos en su página.

    El método RegisterIcon le permite registrar una imagen SVG como un 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");
         }
      }
    }
    razor

    El método anterior agregará un ícono llamado search a una colección en caché llamada material.

    Para utilizar el icono recién registrado, todo lo que tienes que hacer es pasar el nombre y la colección al elemento IgbIcon:

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

    El segundo método para registrar iconos es pasar una cadena SVG al 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");
         }
      }
    }
    razor

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

    Tamaño

    El componente de ícono admite tres tamaños de ícono: small, medium (predeterminado) y large. Para cambiar el tamaño del icono, puede utilizar la variable CSS--ig-size de la siguiente manera:

    igc-icon {
      --ig-size: var(--ig-size-large);
    }
    css
    <IgbIcon Size="@SizableComponentSize.Large">
    razor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    reflejado

    Algunos íconos deben verse un poco diferentes cuando se usan en el modo De derecha a izquierda (RTL). Por ese motivo, proporcionamos un atributo mirrored que, cuando se configura, voltea el ícono horizontalmente.

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

    Estilo

    Se puede aplicar estilo al componente de icono aplicando estilos directamente al elemento IgbIcon;

    igc-icon {
      --size: 48px;
      color: olive;
    }
    css

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Referencias de API

    Recursos adicionales