Descripción general de los íconos React

    El componente React Icon te permite mostrar fácilmente la fuente o elegir entre un gran conjunto de íconos SVG predefinidos, pero también te brinda la posibilidad de crear íconos de fuente personalizados para tu proyecto. Gracias a una serie de atributos, puedes definir o cambiar el tamaño del ícono en uso o aplicarle diferentes estilos.

    React Icon Example

    Usage

    Antes de usarlosIgrIcon, debes registrarlo de la siguiente manera:

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego tendrás que importar elIgrIcon CSS necesario y registrar su módulo, así:

    import { IgrIcon } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    NoIgrIcon 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 soloIgrIcon 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:

    constructor() {
    registerIconFromText("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg", "material");
}

<IgrIcon name="search" collection="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 alIgrIcon elemento:

    <IgrIcon name="search" collection="material" />

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

constructor() {
    registerIconFromText("search", searchIcon, "material");
}

<IgrIcon name="search" collection="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:

    <IgrIcon className="size-small" />
<IgrIcon className="size-medium" />
<IgrIcon className="size-large" />

    .size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --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.

    <IgrIcon name="search" collection="material" mirrored={true} />

    Styling

    El componente icono puede estilizarse aplicando estilos directamente alIgrIcon elemento;

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

    API References

    Additional Resources