React Icon Overview

    The React Icon component allows you to easily display font or choose from a large set of predefined SVG icons, but it also gives you the ability to create custom font icons for your project. Benefiting from a number of attributes, you can define or change the size of the icon in use or apply different styles to it.

    React Icon Example

    Usage

    Before using the IgrIcon, you need to register it as follows:

    First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

    npm install igniteui-react
    

    You will then need to import the IgrIcon, its necessary CSS, and register its module, like so:

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

    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:

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

    O método acima adicionará um ícone chamado search a uma coleção em cache chamada 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>';
    
    registerIconFromText("search", searchIcon, "material");
    
    
    <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");
    }
    

    Então você o usaria da mesma maneira descrita no exemplo de componente acima.

    Tamanho

    O componente icon suporta três tamanhos de ícone -small, medium (padrão) e large. Para alterar o tamanho do ícone, você pode utilizar a variável CSS--ig-size da seguinte forma:

    igc-icon {
      --ig-size: var(--ig-size-large);
    }
    
    <IgrIcon size="large" />
    

    Mirrored

    Alguns ícones precisam parecer um pouco diferentes quando usados no modo Right-to-Left (RTL). Por esse motivo, fornecemos um atributo mirrored que, quando definido, inverte o ícone horizontalmente.

    <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