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
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import './IconSizing.css' ;
import { IgrIcon, IgrIconModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrIconModule.register();
export default class IconSizing extends React.Component <any, any> {
constructor (props: any ) {
super (props);
this .iconRef = this .iconRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="horizontal-border-container" >
<IgrIcon ref ={this.iconRef} className ="size-small" name ="build" collection ="material" />
<IgrIcon className ="size-medium" name ="build" collection ="material" />
<IgrIcon className ="size-large" name ="build" collection ="material" />
</div >
</div >
);
}
public iconRef(icon: IgrIcon){
if (!icon){
return ;
}
const buildIcon =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>' ;
icon.registerIconFromText("build" , buildIcon, "material" );
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<IconSizing /> );
tsx コピー .horizontal-border-container {
display : flex;
align-items : center;
width : 400px ;
border : 1px solid gainsboro;
}
.size-small {
--ig-size: var (--ig-size-small);
}
.size-medium {
--ig-size: var (--ig-size-medium);
}
.size-large {
--ig-size: var (--ig-size-large);
}
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
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import './IconSizing.css' ;
import { IgrIcon, IgrIconModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrIconModule.register();
export default class IconSizing extends React.Component <any, any> {
constructor (props: any ) {
super (props);
this .iconRef = this .iconRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="horizontal-border-container" >
<IgrIcon ref ={this.iconRef} className ="size-small" name ="build" collection ="material" />
<IgrIcon className ="size-medium" name ="build" collection ="material" />
<IgrIcon className ="size-large" name ="build" collection ="material" />
</div >
</div >
);
}
public iconRef(icon: IgrIcon){
if (!icon){
return ;
}
const buildIcon =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>' ;
icon.registerIconFromText("build" , buildIcon, "material" );
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<IconSizing /> );
tsx コピー .horizontal-border-container {
display : flex;
align-items : center;
width : 400px ;
border : 1px solid gainsboro;
}
.size-small {
--ig-size: var (--ig-size-small);
}
.size-medium {
--ig-size: var (--ig-size-medium);
}
.size-large {
--ig-size: var (--ig-size-large);
}
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
Estilo
Se puede aplicar estilo al componente de icono aplicando estilos directamente al elemento IgrIcon
;
igc-icon {
--size: 48px ;
color : olive;
}
css
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import './IconStyling.css' ;
import { IgrIcon, IgrIconModule } from "@infragistics/igniteui-react" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
IgrIconModule.register();
export default class IconStyling extends React.Component <any, any> {
constructor (props: any ) {
super (props);
this .iconRef = this .iconRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample" >
<div className ="horizontal-border-container" >
<IgrIcon ref ={this.iconRef} name ="search" collection ="material" />
</div >
</div >
);
}
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" );
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<IconStyling /> );
tsx コピー .horizontal-border-container {
display : flex;
align-items : center;
width : 400px ;
border : 1px solid gainsboro;
}
igc-icon {
--size: 48px ;
color : olive;
}
css コピー
Referencias de API
Recursos adicionales