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.

    Ejemplo de icono React

    EXAMPLE
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

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

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

    npm install igniteui-react
    cmd

    Luego necesitarás importar IgrIcon, su CSS necesario y registrar su módulo, así:

    import { IgrIcon, IgrIconModule } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    IgrIconModule.register();
    tsx

    IgrIcon 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 IgrIcon 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:

    
    <IgrIcon ref={this.iconRef} name="search" collection="material" />
    
    public iconRef(icon: IgrIcon) {
        if (!icon) {
            return;
        }
    
        icon.registerIcon("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg", "material");
    }
    tsx

    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 IgrIcon:

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

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

    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");
    ts
    
    <IgrIcon ref={this.iconRef} name="search" collection="material" />
    
    public iconRef(icon: IgrIcon) {
        if (!icon) {
            return;
        }
    
        const searchIcon =
          '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><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>';
    
        icon.registerIconFromText("search", searchIcon, "material");
    }
    tsx

    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
    <IgrIcon size="large" />
    tsx

    EXAMPLE
    TSX
    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.

    <IgrIcon name="search" collection="material" mirrored={true} />
    tsx
    Ignite UI for React | CTA Banner

    Estilo

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

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

    EXAMPLE
    TSX
    CSS

    Referencias de API

    Recursos adicionales