Web Components Icon Overview
The Web Components 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.
Web Components Icon Example
Usage
Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:
npm install igniteui-webcomponents
import { defineComponents, IgcIconComponent } from "igniteui-webcomponents";
defineComponents(IgcIconComponent);
Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.
The IgcIconComponent
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 have to do is import one of the 2 utility functions from the icons registry service that allows you to add icons to an icon collection.
import {
registerIcon,
registerIconFromText,
} from "igniteui-webcomponents";
The registerIcon
function allows you to register an SVG image as an icon from an external file:
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 IgcIconComponent
element:
<igc-icon name="search" collection="material"></igc-icon>
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");
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);
}
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.
<igc-icon name="search" mirrored></igc-icon>
Styling
The icon component can be styled by applying styles directly to the IgcIconComponent
element;
igc-icon {
--size: 28px;
color: var(--ig-primary-500);
}