Tamaño del icono de React Suite

Una suite de React es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre los tamaños de los iconos de React Suite. Los íconos de React Suite pueden cambiar su tamaño usando propiedades básicas de CSS.

Accesorios de iconos:

• as: se utiliza para agregar un componente de icono SVG personalizado.
• relleno: Se utiliza para rellenar el color del icono.
• flip: Se utiliza para voltear el icono.
• pulso: Se utiliza para girar el icono con ocho pasos.
• rotar: se utiliza para rotar el icono.
• girar: Se utiliza para girar el icono.
• estilo: Se utiliza para agregar o cambiar estilos de iconos.

Uso de iconos en React Suite:

Para usar íconos en el proyecto de la suite React, necesitamos instalar el siguiente paquete.

Paso 1: Instale el paquete @rsuite/icons en el directorio de su proyecto.

npm install --save @rsuite/icons

Paso 2: importe los íconos en su componente de función desde el paquete.

import { Gear, AddOutline } from '@rsuite/icons';

Sintaxis:

//Import Statement
import SpinnerIcon from '@rsuite/icons/legacy/Spinner';

//Function component
Function App () {
    return (
    <SpinnerIcon style={{ fontSize: '1em'}} />
  );
}

Ejemplo 1: El siguiente ejemplo demuestra los diferentes tamaños de iconos.

import Github from '@rsuite/icons/legacy/Github';
import React from "react";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  
    const GitIcon = ({ size }) => <Github 
        style={{ fontSize: size }} />;
  
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h3 style={{ color: "green" }}>
                React Suite Icons Sizes
            </h3>
            <div>
                <GitIcon size="1em" />
                <GitIcon size="2em" />
                <GitIcon size="3em" />
                <GitIcon size="4em" />
                <GitIcon size="5em" />
                <GitIcon size="6em" />
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra los diferentes tamaños de iconos animados de colores.

import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
import React from "react";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h3 style={{ color: "green" }}>
                React Suite Icons Sizes
            </h3>
            <div>
                <SpinnerIcon spin style={{ fontSize: '1em', 
                    marginRight: 5, color: 'red' }} />
  
                <SpinnerIcon spin style={{ fontSize: '2em', 
                    marginRight: 5, color: 'green' }} />
  
                <SpinnerIcon spin style={{ fontSize: '3em', 
                    marginRight: 5, color: 'blue' }} />
  
                <SpinnerIcon spin style={{ fontSize: '4em', 
                    marginRight: 5, color: 'yellow' }} />
                  
                <SpinnerIcon spin style={{ fontSize: '5em', 
                    marginRight: 5, color: 'orange' }} />
                      
                <SpinnerIcon spin style={{ fontSize: '6em' }} />
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/icon/#size