Color 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 colores de los iconos de React Suite. Podemos usar cualquier color en los íconos de la suite de reacción simplemente usando el accesorio de estilo del componente Icon.

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 for Icons
import SpinnerIcon from '@rsuite/icons/legacy/Spinner';

//Function component
Function App () {
    return (
        <SpinnerIcon color: 'red' />
     );
}

Ejemplo 1: El siguiente ejemplo muestra los diferentes colores de iconos.

import GithubSquare from '@rsuite/icons/legacy/GithubSquare';
import LinkedinSquare from '@rsuite/icons/legacy/LinkedinSquare';
import FacebookSquare from '@rsuite/icons/legacy/FacebookSquare';
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 Colors</h3>
            <div>
                <GithubSquare style={{ fontSize: '3rem', }} 
                    color="#000" />
                <LinkedinSquare style={{ fontSize: '3rem' }} 
                    color="#2D86F7" />
                <FacebookSquare style={{ fontSize: '3rem' }} 
                    color="#153FEC" />
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra un icono animado en color.

import { Gear } from '@rsuite/icons';
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 Colors</h3>
            <div>
                <Gear spin style={{ fontSize: '3rem', }} 
                    color="red" />
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

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