Descripción general de Web Components iconos

    El componente Web Components 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.

    Web Components Icon Example

    Usage

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    import { defineComponents, IgcIconComponent } from "igniteui-webcomponents";

defineComponents(IgcIconComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

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

    Adding Icons

    Para registrar una imagen como ícono, todo lo que tiene que hacer es importar una de las 2 funciones de utilidad del servicio de registro de íconos que le permite agregar íconos a una colección de íconos.

    import {
  registerIcon,
  registerIconFromText,
} from "igniteui-webcomponents";

    LaregisterIcon función permite registrar una imagen SVG como icono desde un archivo externo:

    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 alIgcIconComponent elemento:

    <igc-icon name="search" collection="material"></igc-icon>

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

    const 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>';

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

    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.

    <igc-icon name="search" mirrored></igc-icon>

    Styling

    El componente icono puede estilizarse aplicando estilos directamente alIgcIconComponent elemento;

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

    API References

    Additional Resources