Extensión React Suite Icon React Iconos

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 íconos React de la extensión React Suite Icon. React Icons, contiene varias bibliotecas populares de íconos como Fontawesome, Material Design, AntDesign, etc.

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.

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

Sintaxis:

//Import Statement
import { FaHome } from "react-icons/fa";

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

Ejemplo 1: El siguiente ejemplo muestra los íconos animados de React.

import { Icon } from '@rsuite/icons';
import {
    FaSpinner as FaSpinnerIcon
} from 'react-icons/fa';
import React from "react";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Icon extension React Icons
            </h4>
            <div style={{ 
                display: 'flex', 
                flexDirection: 'row', 
                alignItems: 'center' 
            }}>
                <Icon pulse as={FaSpinnerIcon} 
                    style={{ fontSize: 40 }} color="red" />
                <Icon pulse as={FaSpinnerIcon} 
                    style={{ fontSize: 30, marginLeft: 10 }}
                    color="red" />
                <Icon pulse as={FaSpinnerIcon} 
                    style={{ fontSize: 20, marginLeft: 10 }}
                    color="red" />
                <Icon pulse as={FaSpinnerIcon} 
                    style={{ fontSize: 15, marginLeft: 10 }}
                    color="red" />
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra los diferentes tipos de íconos de reacción como Fa, Md, Io, Ai, etc.

import { Icon } from '@rsuite/icons';
import { AiOutlineHome } from "react-icons/ai";
import { IoHomeOutline } from "react-icons/io5";
import { MdHome } from "react-icons/md";
import { FaHome } from "react-icons/fa";
import React from "react";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Icon extension React Icons
            </h4>
            <div style={{ 
                display: 'flex', 
                flexDirection: 'row', 
                alignItems: 'center' 
            }}>
                <Icon as={AiOutlineHome} 
                    style={{ fontSize: 40 }} color="orange" />
                <span style={{ marginLeft: 10 }}>
                    AntDesign Icon</span>
                <Icon as={IoHomeOutline} 
                    style={{ fontSize: 40 }} color="red" />
                <span style={{ marginLeft: 10 }}>
                    Ionicon Icon</span>
                <Icon as={FaHome} 
                    style={{ fontSize: 40 }} color="green" />
                <span style={{ marginLeft: 10 }}>
                    Font Awesome Icon</span>
                <Icon as={MdHome} 
                    style={{ fontSize: 40 }} color="blue" />
                <span style={{ marginLeft: 10 }}>
                    Material Design Icon</span>
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

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