El componente Icono Web Components le permite mostrar fácilmente la fuente o elegir entre un gran conjunto de iconos SVG predefinidos, pero también le brinda la posibilidad de crear iconos de fuente personalizados para su proyecto. Beneficiándose de una serie de atributos, puede definir o cambiar el tamaño del icono en uso o aplicarle diferentes estilos.
<!DOCTYPE html><html><head><title>Icon Sizing</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web"
/><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css"
/></head><body><divid="root"><divclass="container sample"><divstyle="
display: flex;
align-items: center;
width: 400px;
border: 1px solid gainsboro;
"
><igc-iconname="build"collection="material"class="small"></igc-icon><igc-iconname="build"collection="material"class="medium"></igc-icon><igc-iconname="build"collection="material"class="large"></igc-icon></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Web Components y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
El IgcIconComponent 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 tiene que hacer es importar una de las 2 funciones de utilidad del servicio de registro de íconos que le permite agregar íconos a una colección de íconos.
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:
<!DOCTYPE html><html><head><title>Icon Sizing</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web"
/><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css"
/></head><body><divid="root"><divclass="container sample"><divstyle="
display: flex;
align-items: center;
width: 400px;
border: 1px solid gainsboro;
"
><igc-iconname="build"collection="material"class="small"></igc-icon><igc-iconname="build"collection="material"class="medium"></igc-icon><igc-iconname="build"collection="material"class="large"></igc-icon></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */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.
<igc-iconname="search"mirrored></igc-icon>html
Estilo
Se puede aplicar estilo al componente de icono aplicando estilos directamente al elemento IgcIconComponent;
<!DOCTYPE html><html><head><title>Icon Sizing</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web"
/><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css"
/></head><body><divid="root"><divclass="container sample"><divstyle="
display: flex;
align-items: center;
width: 400px;
border: 1px solid gainsboro;
"
><igc-iconname="search"collection="material"></igc-icon></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css