React Suite Navegación con icono

Requisito previo: Introducción a 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 React Suite Nav con Icon. Un navegador proporciona una lista de varios tipos de menús de navegación, que pueden ser diseños horizontales y verticales. Se puede crear una navegación en la aplicación de reacción agregando iconos en la barra de navegación. 

Accesorios de iconos de navegación:

• 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 iconos.
• pulso: Se utiliza para rotar iconos con ocho pasos.
• rotar: Se utiliza para rotar iconos.
• 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 con componente de navegació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 { Gear, AddOutline } from '@rsuite/icons';

Sintaxis:

//Import Statement
import { IconName } from "@rsuite/icons";

//Function component
Function App () {

    return (
          <Nav>
            <Nav.Item icon={<IconName />}>Icon 1</Nav.Item>
            <Nav.Item icon={<IconName />}>Icon 2</Nav.Item>
            <Nav.Menu icon={<IconName />} title="More">
                  <Nav.Item icon={<IconName />}>Icon 3</Nav.Item>
                  <Nav.Item icon={<IconName />}>Icon 4</Nav.Item>
            </Nav.Menu>
          </Nav>
      );
}

Ejemplo 1: El siguiente ejemplo demuestra la navegación básica con iconos.

import React from "react";
import { Nav } from "rsuite";
import { Check, Page, Tag, Task } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div style={{ padding: 10, 
                      backgroundColor: 'indigo' }}>
            <Nav>
                <Nav.Item icon={<Task />}>
                    Practice </Nav.Item>
                <Nav.Item icon={<Page />}>
                    Tutorials</Nav.Item>
                <Nav.Menu title="Jobs">
                    <Nav.Item icon={<Check />}>
                        Apply</Nav.Item>
                    <Nav.Item icon={<Tag />}>
                        Job-a-thon</Nav.Item>
                </Nav.Menu>
            </Nav>
  
        </div>
    );
}
  
export default App;

Pasos para ejecutar la aplicación: escriba el siguiente código en la terminal para ejecutar el código:

npm start

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra la navegación básica con iconos de colores.

import React from "react";
import { Nav } from "rsuite";
import { Check, Edit, FolderFill, Page, Tag, Task } from "@rsuite/icons";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  return (
    <div style={{ padding: 10, 
                  backgroundColor: '#F4F5F4'}}>
      <Nav>
        <Nav.Item icon={<Task color="red" />}>
            Practice </Nav.Item>
        <Nav.Item icon={<Page color="green" /> }>
            Articles</Nav.Item>
        <Nav.Item icon={<FolderFill color="#f5a623" />}>
            Courses</Nav.Item>
        <Nav.Menu title="Jobs">
          <Nav.Item icon={<Check color="blue" />}>
              Apply</Nav.Item>
          <Nav.Item icon={<Tag color="orange" />}>
              Job-a-thon</Nav.Item>
          <Nav.Item icon={<Edit color="cyan" />}>
              Internships</Nav.Item>
        </Nav.Menu>
      </Nav>
        
    </div>
  );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/nav/#with-icon