Icono de botón React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente Botón se utiliza para activar una acción cuando el usuario hace clic en el botón. En este artículo, discutiremos el icono del botón de React Suite . Para usar un ícono como botón se usa el componente IconButton el cual tiene una propiedad llamada icon para especificar el ícono que queremos usar.

Componentes del icono del botón React Suite:

• IconButton: Este componente se utiliza cuando queremos utilizar un icono como botón, tiene una propiedad icon que se utiliza para especificar el icono del Botón.

Accesorios de icono de botón de React Suite:

• icon: Esta propiedad del componente IconButton se usa para especificar el icono que queremos usar.
• color: Esta propiedad del componente IconButton se utiliza para cambiar el color del botón. La propiedad de color puede tener cualquiera de siete valores: rojo, naranja, amarillo, verde, cian, azul o violeta.

Sintaxis:

<IconButton icon={<TwitterIcon />}> Twitter </IconButton>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: muévase a la carpeta del proyecto recién creada usando el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale los módulos requeridos (rsuite y @rsuite/icons en este caso) usando el siguiente comando:

npm install rsuite @rsuite/icons

Estructura del proyecto: después de completar los pasos anteriores, la estructura del proyecto tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado. En el siguiente ejemplo, usamos la propiedad de icono del componente IconButton para especificar el icono.

import React from "react";
import { IconButton } from "rsuite";
import { Admin, Menu, Reload, Resize, Search } from '@rsuite/icons';
// Import the default CSS
import "rsuite/dist/rsuite.min.css";
  
function App() {
  
    const ButtonStyle = { margin: "0px 10px" };
    return (
  
        <div className="App" style={{ textAlign: "center" }}>
            <header style={{ display: "block", marginBottom: "20px" }}>
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
                <h5>React Suite Button Icon</h5>
            </header>
  
            {/* Icon Buttons */}
            <IconButton icon={<Reload />} color="cyan" 
                appearance="primary" style={ButtonStyle} />
            <IconButton icon={<Menu />} color="red" 
                appearance="primary" style={ButtonStyle} />
            <IconButton icon={<Admin />} color="violet" 
                appearance="primary" style={ButtonStyle} />
            <IconButton icon={<Resize />} color="green" 
                appearance="primary" style={ButtonStyle} />
            <IconButton icon={<Search />} color="cyan" 
                appearance="primary" style={ButtonStyle} />
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

 

Ejemplo 2: En este ejemplo, usamos las propiedades de tamaño y círculo del componente IconButton para hacerlo circular y cambiar el tamaño del icono.

import React from "react";
import { IconButton } from "rsuite";
import { Admin, Menu, Reload, Resize, Search } from '@rsuite/icons';
// Import the default CSS
import "rsuite/dist/rsuite.min.css";
  
function App() {
  
    const ButtonStyle = { margin: "0px 10px" };
    return (
  
        <div className="App" style={{ textAlign: "center" }}>
            <header style={{ display: "block", marginBottom: "20px" }}>
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3>
                <h5>React Suite Button Icon</h5>
            </header>
  
            {/* Icon Buttons */}
            <IconButton icon={<Menu />} color="red" 
                appearance="primary" style={ButtonStyle} 
                circle size="xs" />
            <IconButton icon={<Admin />} color="violet" 
                appearance="primary" style={ButtonStyle} 
                circle size="sm" />
            <IconButton icon={<Resize />} color="green" 
                appearance="primary" style={ButtonStyle} 
                circle size="md" />
            <IconButton icon={<Search />} color="cyan" 
                appearance="primary" style={ButtonStyle} 
                circle size="lg" />
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/button/#icon-button