Visão geral do ícone React

    O componente Ícone React permite exibir facilmente a fonte ou escolher entre um grande conjunto de ícones SVG predefinidos, mas também oferece a capacidade de criar ícones de fonte personalizados para o seu projeto. Beneficiando-se de vários atributos, você pode definir ou alterar o tamanho do ícone em uso ou aplicar estilos diferentes a ele.

    React Icon Example

    Usage

    Antes de usá-losIgrIcon, você precisa registrá-los da seguinte forma:

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você então precisará importar oIgrIcon CSS necessário e registrar seu módulo, assim:

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

    EleIgrIcon não contém nenhum ícone sozinho. É um conduíte para exibir quaisquer imagens SVG registradas.

    Adding Icons

    Para registrar uma imagem como ícone, tudo o que você precisa fazer é chamar um dos dois métodos de "registro" em um únicoIgrIcon elemento que permitem adicionar ícones a uma coleção de ícones na sua página.

    OregisterIcon método permite registrar uma imagem SVG como um ícone a partir de um arquivo 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" />

    O método acima adiciona um ícone nomeadosearch a uma coleção em cache nomeadomaterial.

    Para usar o ícone recém-registrado, tudo o que você precisa fazer é passar o nome e a coleção para oIgrIcon elemento:

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

    O segundo método para registrar ícones é passar uma string SVG para oregisterIconFromText 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" />

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

    Tamanho

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

    <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

    Alguns ícones precisam ter uma aparência um pouco diferente quando usados no modo Direita para Esquerda (RTL). Por isso, fornecemos ummirrored atributo que, quando definido, inverte o ícone horizontalmente.

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

    Styling

    O componente icon pode ser estilizado aplicando estilos diretamente aoIgrIcon elemento;

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

    API References

    Additional Resources