Extensión de icono de React Suite Fuente iconos impresionantes

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 React Suite Font Awesome Icons. En la suite de reacción, también podemos usar todo tipo de íconos impresionantes de fuentes para construir nuestra aplicación web. Aquí, Font Awesome proporciona 3 conjuntos de paquetes de iconos de código abierto en la suite de reacción.

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.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Uso de iconos de Font Awesome:

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

npm install --save @rsuite/icons

Paso 2: Instale el paquete de iconos Font Awesome:

npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-solid-svg-icons

Sintaxis:

//Import Statement
import * as faGoogle  from "@fortawesome/free-brands-svg-icons/faGoogle";
import { Icon} from "@rsuite/icons";

//Function component
Function App () {
 return (
       <Icon as={FaSvgIcon} faIcon={faTwitter} 
           style={{ color: "#61dafb" }} />
  );
}

Ejemplo 1: El siguiente ejemplo muestra los iconos impresionantes de fuentes básicas.

//App.js File 
import { Icon } from "@rsuite/icons";
import * as faTwitter from "@fortawesome/free-brands-svg-icons/faTwitter";
import * as faGoogle from "@fortawesome/free-brands-svg-icons/faGoogle";
import * as faGithub from "@fortawesome/free-brands-svg-icons/faGithub";
import React from "react";
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 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Font Awesome Icons</h4>
  
            <div
                style={{ display: "flex", flexDirection: "row", 
                         alignItems: "center" }}
            >
                <Icon as={FaSvgIcon} faIcon={faTwitter} 
                    style={{ color: "#61dafb" }} />
                <Icon as={FaSvgIcon} faIcon={faGoogle} 
                    style={{ color: "red", marginLeft: 10 }} />
                <Icon as={FaSvgIcon} faIcon={faGithub} 
                    style={{ color: "black", marginLeft: 10 }} />
            </div>
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute el siguiente comando desde el directorio raíz de su proyecto:

npm start

Producción: 

 

Ejemplo 2: El siguiente ejemplo muestra los impresionantes iconos de fuentes animadas con texto.

import { Icon } from "@rsuite/icons";
import * as faSpinner from "@fortawesome/free-solid-svg-icons/faSpinner";
import React from "react";
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="2em"
                height="2em"
                fill="currentColor"
            >
                <path d={svgPathData}></path>
            </svg>
        );
    };
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Font Awesome Icons</h4>
            <div>
                <Icon as={FaSvgIcon} faIcon={faSpinner} spin 
                    style={{ color: "green" }} />
                <span style={{ marginLeft: "10px" }}>
                    Loading Content...</span>
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/icon/#font-awesome-icons