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

    The IgrIcon doesn't contain any icons on its own. It's a conduit for displaying any registered SVG images.

    Adding Icons

    To register an image as an icon, all you need to do is call one of the 2 "register" methods on a single IgrIcon element that allow you to add icons to an icon collection on your page.

    The registerIcon method allows you to register an SVG image as an icon from an external file:

    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" />

    The method above will add an icon named search to a cached collection named material.

    In order to use the newly registered icon, all you have to do is to pass the name and collection to the IgrIcon element:

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

    The second method for registering icons is by passing an SVG string to the registerIconFromText method:

    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

    The icon component supports three icon sizes - small, medium(default), and large. In order to change the size of the icon, you can utilize the --ig-size CSS variable as follows:

    <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

    Some icons need to look a little different when used in Right-to-Left(RTL) mode. For that reason we provide a mirrored attribute that, when set, flips the icon horizontally.

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

    Styling

    The icon component can be styled by applying styles directly to the IgrIcon element;

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

    API References

    Additional Resources