Extensión de icono de React Suite

React suite 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 la extensión React Suite Icon. Para agregar íconos diferentes en lugar de los íconos de Rsuite, el usuario también puede usar íconos SVG personalizados, íconos de reacción, íconos de fuentes increíbles e íconos de IconFont.

Sintaxis:

function App() {
    return (
          <div>
              <Icon as={FaHome || SvgIcon} />
          </div>
    );
}

Usando el componente de iconos de reacción:

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 { Icon } from '@rsuite/icons';

Paso 3: Instale el paquete React Icon en su proyecto.

npm install react-icons --save

Ejemplo 1: El siguiente ejemplo demuestra el uso de los iconos FontAwesome.

import { Icon } from "@rsuite/icons";
import * as faFacebook from 
    "@fortawesome/free-brands-svg-icons/faFacebook";
import * as faGoogle from 
    "@fortawesome/free-brands-svg-icons/faGoogle";
  
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const FaSvgIcon = ({ faIcon, ...rest }) => {
        const { width, height, svgPathData } = faIcon;
        return (
            <svg
                {...rest}
                viewBox={`0 0 ${width} ${height}`}
                width="5em"
                height="5em"
                fill="currentColor"
            >
                <path d={svgPathData}></path>
            </svg>
        );
    };
  
    return (
        <div style={{ padding: 10, textAlign: 'center' }}>
              
            <h2>GeeksforGeeks</h2>
              
            <h4 style={{ color: "green" }}>
                React Suite Icon Extension
            </h4>
  
            <div style={{ textAlign: 'center' }}>
                <Icon as={FaSvgIcon} faIcon={faFacebook} 
                    style={{ color: "blue" }} />
                  
                <Icon
                    as={FaSvgIcon}
                    faIcon={faGoogle}
                    style={{ color: "red", marginLeft: 10 }}
                />
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra el uso de React Icons.

import { Icon } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";
import { FaUndo as FaArrow } from 'react-icons/fa';
  
  
export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Icon Extension
                </h4>
            </div>
  
            <div
                style={{
                    textAlign: "center",
                    padding: 20
                }}
            >
                <Icon pulse as={FaArrow} 
                    style={{ fontSize: 40 }} color="green" />
                  
                <Icon
                    pulse
                    as={FaArrow}
                    style={{ fontSize: 30, marginLeft: 10 }}
                    color="green"
                />
            </div>
        </div>
    );
}

Producción:

 

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