Icono de React Suite <IconFont> Props

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 <IconFont> Accesorios:

• relleno: Se utiliza para rellenar el icono con un color específico.
• icono: Se utiliza para denotar el nombre del icono.
• 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:

<IconFont icon="rs-iconemail-fill" 
          flip="..." fill="..." 
          rotate={...} spin />

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

Creando proyecto React:

Paso 1: para crear una aplicación de reacción, debe instalar los 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 IconFont de React Suite.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { createIconFont } from '@rsuite/icons';
  
export default function App() {
  
    const IconFont = createIconFont({
        scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js',
        commonProps: { style: { fontSize: '5em', margin: '2%' } },
    });
  
    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h1>
                React Suite IconFont Props
            </h1>
            <IconFont icon="rs-iconemail-fill" 
                      fill="green" />
            <IconFont icon="rs-iconemail-fill" 
                      rotate={90} fill="green" />
            <IconFont icon="rs-iconemail-fill" 
                      flip="vertical" fill="green" />
            <IconFont icon="rs-iconemail-fill" 
                      rotate={270} fill="green" />
        </div>
    );
}

Paso para ejecutar la aplicación : ejecute la aplicación usando 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:

React suite IconFuente

Ejemplo 2: estamos creando una interfaz de usuario que muestra los accesorios IconFont de React Suite.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { createIconFont } from '@rsuite/icons';
  
export default function App() {
  
    const IconFont = createIconFont({
        scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js',
        commonProps: { style: { fontSize: '5em', margin: '2%' } },
    });
  
    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h1>
                React Suite IconFont Props
            </h1>
            <p>
                Normal Icon
                <IconFont icon="rs-iconreload" 
                    fill="green" />
            </p>
            <p>
                Icon with pulse prop
                <IconFont icon="rs-iconreload" 
                    pulse fill="green" />
            </p>
            <p>
                Icon with spin prop
                <IconFont icon="rs-iconreload" 
                    spin fill="green" />
            </p>
        </div>
    );
}

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

React suite IconFuente

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