Descripción general del botón React Icon

El componente Botón de icono de Ignite UI for React permite a los desarrolladores utilizar iconos registrados como botones en su aplicación. Lleva todas las características del componente de icono, pero también agrega características del componente de botón.

Ejemplo de botón de icono de React

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrIconButtonModule.register();

export default class IconButtonSize extends React.Component<any, any> {

    public smallIcon: IgrIconButton;
    public mediumIcon: IgrIconButton;
    public largeIcon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        this.smallRef = this.smallRef.bind(this);
        this.mediumRef = this.mediumRef.bind(this);      
        this.largeRef = this.largeRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton className="size-small" ref={this.smallRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-medium" ref={this.mediumRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-large" ref={this.largeRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
    
    public smallRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.smallIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.smallIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public mediumRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.mediumIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.mediumIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public largeRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.largeIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.largeIcon.registerIconFromText("thumb-up", iconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonSize/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.size-small {
    margin: "10px";
    --ig-size: var(--ig-size-small);
}

.size-medium {
    margin: "10px";
    --ig-size: var(--ig-size-medium);
}

.size-large {
    margin: "10px";
    --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

Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

npm install igniteui-react
cmd

Luego necesitarás importar IgrIconButton, su CSS necesario y registrar su módulo, así:

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

<IgrIconButton name="thumb-up" collection="material"></IgrIconButton>
tsx

Ejemplos

Variante

Al igual que los componentes de botón normales, el botón de icono admite varias variantes: flat (predeterminado), contained y outlined; Para cambiar el tipo de botón de icono, establezca el atributo de variant del botón de icono.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrIconButtonModule.register();

export default class IconButtonVariant extends React.Component<any, any> {

    public icon1: IgrIconButton;
    public icon2: IgrIconButton;
    public icon3: IgrIconButton;

    constructor(props: any) {
        super(props); 
        this.smallRef = this.smallRef.bind(this);
        this.mediumRef = this.mediumRef.bind(this);      
        this.largeRef = this.largeRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton style={{margin: "10px"}} ref={this.smallRef} 
                        name="thumb-up" 
                        collection="material"
                        variant="flat">
                    </IgrIconButton>
                    <IgrIconButton style={{margin: "10px"}} ref={this.mediumRef} 
                        name="thumb-up" 
                        collection="material" 
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton style={{margin: "10px"}} ref={this.largeRef} 
                        name="thumb-up" 
                        collection="material" 
                        variant="outlined">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
    
    public smallRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon1 = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.icon1.registerIconFromText("thumb-up", iconText, "material");
    }

    public mediumRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon2 = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.icon2.registerIconFromText("thumb-up", iconText, "material");
    }

    public largeRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon3 = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.icon3.registerIconFromText("thumb-up", iconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonVariant/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

<IgrIconButton name="search" collection="contained"></IgrIconButton>
tsx

Tamaño

El tamaño del botón se puede cambiar utilizando la variable CSS--ig-size a cualquiera de los tres tamaños admitidos:--ig-size-small,--ig-size-medium,--ig-size-large ( por defecto).

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrIconButtonModule.register();

export default class IconButtonSize extends React.Component<any, any> {

    public smallIcon: IgrIconButton;
    public mediumIcon: IgrIconButton;
    public largeIcon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        this.smallRef = this.smallRef.bind(this);
        this.mediumRef = this.mediumRef.bind(this);      
        this.largeRef = this.largeRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton className="size-small" ref={this.smallRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-medium" ref={this.mediumRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-large" ref={this.largeRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
    
    public smallRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.smallIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.smallIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public mediumRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.mediumIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.mediumIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public largeRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.largeIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.largeIcon.registerIconFromText("thumb-up", iconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonSize/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.size-small {
    margin: "10px";
    --ig-size: var(--ig-size-small);
}

.size-medium {
    margin: "10px";
    --ig-size: var(--ig-size-medium);
}

.size-large {
    margin: "10px";
    --ig-size: var(--ig-size-large);
}css

<IgrIconButton name="thumb-up" size="medium"></IgrIconButton>
tsx

igc-icon-button {
    --ig-size: var(--ig-size-medium);
}
css

Tipo

El componente del botón de icono cambiará su estructura interna de <button> a un elemento de tipo <a> cuando se establezca el atributo href. En ese caso, el botón del icono puede considerarse como un enlace normal. Configurar el atributo href le permitirá configurar también los atributos rel, target y download del botón de icono.

<IgrIconButton name="thumb-up" collection="material" href="https://duckduckgo.com" target="_blank">
</IgrIconButton>
tsx

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 botón del ícono horizontalmente.

<IgrIconButton name="thumb-up" mirrored="true"></IgrIconButton>
tsx

Estilo

El IgrIconButton componente expone dos partes CSS -base y icon que le permiten diseñar el elemento de envoltura (<button> o <a>) y el elemento envuelto <igc-icon>.

igc-icon-button[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}
css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./IconButtonStyling.css";

IgrIconButtonModule.register();

export default class IconButtonStyling extends React.Component<any, any> {

    public icon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        this.iconRef = this.iconRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrIconButton style={{margin: "10px"}} ref={this.iconRef} 
                    name="thumb-up" 
                    collection="material"
                    variant="contained">
                </IgrIconButton>
            </div>
        );
    }
    
    public iconRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.icon.registerIconFromText("thumb-up", iconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonStyling/>);
tsx


igc-icon-button[variant=contained]:not([disabled])::part(base) {
    padding: 12px;
    color: olive;
    background-color: lightgray;
    --ig-size: var(--ig-size-small);
  }
  
igc-icon-button::part(icon) {
  --size: 32px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css