ReactJS | Iconos

React proporciona una biblioteca integrada de íconos, al usarla podemos incluir cualquier cantidad de íconos en nuestro proyecto. Solo tenemos que importar el módulo en nuestro archivo app.js mencionando el nombre de la biblioteca y el nombre del icono que queremos agregar.

requisitos previos:  

• Fundamentos de ReactJS
• NodeJS:
  • Instalación de Node.js en Windows
  • Instalación de Node.js en Linux
• Aplicación ReactJS ya creada

A continuación, se describen todos los pasos en orden sobre cómo agregar íconos y diseñarlos en React.

• Paso 1: antes de continuar, primero debe instalar la biblioteca de iconos de reacción, ejecutando el siguiente comando en el directorio de su proyecto, con la ayuda de la terminal en su carpeta src o también puede ejecutar este comando en la terminal de Visual Studio Code en su carpeta de proyecto . 

npm install react-icons --save

• Paso 2: después de instalar la biblioteca de íconos, ahora abra su archivo app.js que está preestablecido dentro del directorio de su proyecto, en la carpeta src y elimine el código preestablecido dentro de él. 
   
• Paso 3: Ahora abra la biblioteca de iconos de reacción visitando el siguiente enlace. Esta es una biblioteca incorporada de iconos de reacción proporcionada por reaccionar. Después de abrir los iconos de reacción, ahora desde el menú, seleccione la categoría y el nombre del icono que desea agregar. Después de hacer clic, en el lado derecho verá muchos íconos y sus nombres. En la categoría, estoy seleccionando íconos de juegos, y del lado derecho, estoy seleccionando GiPoliceBadge , puede elegir cualquier otro si lo desea.

https://react-icons.github.io/react-icons/icons?name=gi

• Paso 4: ahora en su archivo app.js , agregue este código:  

import { IconName } from "react-icons/";

aplicación.js:

import React, { Component } from "react";
  
// gi is sort name of game icon.
import { GiPoliceBadge } from "react-icons/gi";
  
// The GiPoliceBadge is icon name.
class App extends Component {
    render() {
        return (
            <div>
                <GiPoliceBadge /> 
            </div>
        );
    }
}
export default App;

Producción: 

• Para ver la salida, ejecute debajo del comando.  

npm start

• Ahora, después de que npm se inició con éxito, abra el navegador y escriba debajo de la URL para ver el resultado.

http://localhost:3000/

app.js: para cambiar el color de los íconos y el tamaño, consulte el código a continuación.

import React, { Component } from "react";
  
// gi is sort name of game icon.
import { GiPoliceBadge } from "react-icons/gi";
  
// The GiPoliceBadge is icon name.
class App extends Component {
    render() {
        return (
            <div>
                <GiPoliceBadge size="100px" color="green"/> 
            </div>
        );
    }
}
export default App;

Producción:

app.js: para agregar múltiples íconos, vea a continuación

import React, { Component } from "react";
  
// gi is sort name of game icon.
import { GiPoliceBadge } from "react-icons/gi";
import { MdAndroid } from "react-icons/md";
import { GoBroadcast } from "react-icons/go";
import { FaAmazon } from "react-icons/fa";
// The GiPoliceBadge is icon name.
class App extends Component {
    render() {
        return (
            <div>
                <GiPoliceBadge size="50px" color="green"/>
                <MdAndroid size="50px" color="yellow" />
                <GoBroadcast size="50px" color="purple"/> 
                <FaAmazon size="50px" color="black" /> 
            </div>
        );
    }
}
export default App;

Producción: