Icono de React Suite <Icono> Accesorios

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.

Hay una gran cantidad de datos que se representan en una página web. A veces requerimos representar datos usando iconos. Aquí es cuando el componente Icon le permite al usuario agregar íconos a su aplicación. Los iconos se usan comúnmente en todas las aplicaciones para fines de interfaz de usuario.

Icono de React Suite <Icono> Accesorios:

• relleno: Se utiliza para rellenar el icono con un color específico.
• componentClass: se utiliza para pasar un elemento personalizado para este componente.
• flip: Se utiliza para voltear el icono.
• pulso: podemos usar pulso para que gire con 8 pasos. Toma un valor booleano.
• rotar: Se utiliza para rotar el icono.
• spin: Se utiliza para el icono de rotación dinámica. Toma un valor booleano.
• estilo: se utiliza para establecer el tamaño de fuente o las propiedades de color de los iconos.

Sintaxis:

<AndroidIcon flip="..." style={{...}}  
             fill="..." rotate={...}/>

Enfoque: Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que mostrará React Suite Icon Props .

Creando proyecto React:

Paso 1 : para crear una aplicación de reacción, debe instalar módulos de reacción a través del comando npx . Se usa “ npx ” en lugar de “ npm ” porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2 : después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Paso 3 : Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto : se verá así:

Estructura del proyecto

Ejemplo 1: estamos creando una interfaz de usuario que muestra diferentes accesorios de iconos de React Suite.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import AndroidIcon from '@rsuite/icons/Android';
  
export default function App() {
    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h1>
                React Suite Icon Props
            </h1> <br></br>
            <AndroidIcon style={{ fontSize: '2em', margin: '2%' }} 
                         fill="green" />
            <AndroidIcon flip="vertical" 
                         style={{ fontSize: '2em', margin: '2%' }} 
                         fill="green" />
            <AndroidIcon rotate={90} 
                         style={{ fontSize: '2em', margin: '2%' }} 
                         fill="green" />
            <AndroidIcon rotate={270} 
                         style={{ fontSize: '2em', margin: '2%' }} 
                         fill="green" />
        </div>
    );
}

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:

Iconos de React Suite

Ejemplo 2: estamos creando una interfaz de usuario que muestra diferentes accesorios de iconos de React Suite.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import GearIcon from '@rsuite/icons/Gear';
  
export default function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h1>
                React Suite Icon Props
            </h1>
            <p>
                Normal Icon
                <GearIcon 
                    style={{ fontSize: '5em', margin: '2%' }} 
                    fill="green" />
            </p>
            <p>
                Icon with pulse prop
                <GearIcon pulse={true} 
                    style={{ fontSize: '5em', margin: '2%' }} 
                    fill="green" />
            </p>
            <p>
                Icon with spin prop
                <GearIcon spin={true} 
                     style={{ fontSize: '5em', margin: '2%' }} 
                     fill="green" />
            </p>
        </div>
    );
}

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

Iconos de React Suite

Referencia : https://rsuitejs.com/components/icon/#code-lt-icon-gt-code