Manipular múltiples checkbox (casillas de verificación) en React es completamente diferente a su uso regular en HTML.

En este artículo veremos cómo trabajar con múltiples checkbox en React.

Aprenderás:

• Cómo usar un checkbox como un input controlado en React.
• Cómo usar los métodos map y reduce de los arreglos (arrays) para ejecutar cálculos complejos.
• Cómo crear un arreglo pre-llenado de longitud específica con algunos valores específicos.

Y mucho más.

Este artículo es una parte de mi curso "Mastering Redux". Aquí puedes acceder a una previsualización de la aplicación que estaremos construyendo en el curso.

Empecemos.

Cómo trabajar con un único checkbox

Empecemos con la funcionalidad de un único checkbox antes de avanzar a múltiples checkboxes.

En este artículo usaremos la sintaxis de React Hooks para crear componentes.

Miremos el siguiente código:

<div className="App">
  Select your pizza topping:
  <div className="topping">
    <input type="checkbox" id="topping" name="topping" value="Paneer" />Paneer
  </div>
</div>

Aquí un demo en Sandbox.

En el código anterior, declaramos solamente un único checkbox de una forma muy similar a como lo haríamos en HTML.

De esta manera es muy fácil marcar y desmarcar el checkbox, tal como se muestra a continuación:

Pero para mostrar en pantalla si la casilla se encuentra marcada o no, necesitamos convertir el checkbox en un input controlado.

En React, un input controlado es manejado por el estado, de tal manera que el valor del input solamente pueda ser cambiado si se modifica el estado relacionado con ese input.

Mira el siguiente caso:

export default function App() {
  const [isChecked, setIsChecked] = useState(false);

  const handleOnChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div className="App">
      Select your pizza topping:
      <div className="topping">
        <input
          type="checkbox"
          id="topping"
          name="topping"
          value="Paneer"
          checked={isChecked}
          onChange={handleOnChange}
        />
        Paneer
      </div>
      <div className="result">
        Above checkbox is {isChecked ? "checked" : "un-checked"}.
      </div>
    </div>
  );
}

Aquí puedes ver el código en Sandbox.

En el código de arriba, hemos declarado el estado isChecked en el componente con un valor inicial en false haciendo uso del hook useState.

const [isChecked, setIsChecked] = useState(false);

Luego, al input de tipo checkbox le hemos dado dos props adicionales, checked y onChange:

<input
  ...
  checked={isChecked}
  onChange={handleOnChange}
/>

Cada vez que hacemos clic en el checkbox, la función handleOnChange será ejecutada. Esto hará que modifiquemos el valor del estado isChecked:

const handleOnChange = () => {
  setIsChecked(!isChecked);
};

Si el checkbox se encuentra marcado, cambiaremos el valor de isChecked a false. Pero si el checkbox se encuentra desmarcado, definiremos el estado como true usando !isChecked. Luego pasamos este valor en el input a través de la prop checked.

De esta manera el input de tipo checkbox se convierte en un input controlado cuyo valor es gestionado por el estado.

En React siempre se recomienda usar inputs controlados aun si el código se ve visualmente complicado. Esto garantiza que los cambios en los inputs solamente ocurran al interior de la función ligada al evento onChange.

El estado del input no se verá afectado de ninguna otra manera y así siempre obtendrás el valor correcto y actualizado en el input.

Solo en casos raros puedes usar React ref para usar el input de forma no controlada.

Cómo manejar múltiples checkbox

Ahora démosle una mirada a cómo manipular múltiples checkbox.

Mira el siguiente código en Sandbox:

Aquí, estamos mostrando una lista de ingredientes y su precio correspondiente. Basados en los ingredientes que sean seleccionados, necesitamos mostrar el valor total.

Previamente, con un único checkbox, solamente teníamos el estado isChecked y con ello podíamos cambiar el estado.

Sin embargo, ahora tenemos muchos checkbox, así que no es práctico agregar múltiples useState para cada uno de ellos.

Entonces, declaremos un arreglo dentro del estado indicando la marcación de cada uno de los checkbox.

Para crear un arreglo de longitud igual al número de checkbox, podemos usar el método fill de los arreglos así:

const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
);

Aquí hemos declarado un estado con un valor inicial igual a un arreglo cuyos valores son false.

Así que si tenemos 5 ingredientes, entonces el estado checkedState será un arreglo con 5 valores en false.

[false, false, false, false, false]

Ahora, una vez que marquemos (y desmarquemos) el checkbox, cambiaremos el valor false correspondiente por true (y viceversa).

Aquí está el Sandbox final. El código App.js completo de se ve así:

import { useState } from "react";
import { toppings } from "./utils/toppings";
import "./styles.css";

const getFormattedPrice = (price) => `$${price.toFixed(2)}`;

export default function App() {
  const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
  );

  const [total, setTotal] = useState(0);

  const handleOnChange = (position) => {
    const updatedCheckedState = checkedState.map((item, index) =>
      index === position ? !item : item
    );

    setCheckedState(updatedCheckedState);

    const totalPrice = updatedCheckedState.reduce(
      (sum, currentState, index) => {
        if (currentState === true) {
          return sum + toppings[index].price;
        }
        return sum;
      },
      0
    );

    setTotal(totalPrice);
  };

  return (
    <div className="App">
      <h3>Select Toppings</h3>
      <ul className="toppings-list">
        {toppings.map(({ name, price }, index) => {
          return (
            <li key={index}>
              <div className="toppings-list-item">
                <div className="left-section">
                  <input
                    type="checkbox"
                    id={`custom-checkbox-${index}`}
                    name={name}
                    value={name}
                    checked={checkedState[index]}
                    onChange={() => handleOnChange(index)}
                  />
                  <label htmlFor={`custom-checkbox-${index}`}>{name}</label>
                </div>
                <div className="right-section">{getFormattedPrice(price)}</div>
              </div>
            </li>
          );
        })}
        <li>
          <div className="toppings-list-item">
            <div className="left-section">Total:</div>
            <div className="right-section">{getFormattedPrice(total)}</div>
          </div>
        </li>
      </ul>
    </div>
  );
}

Entendamos lo que estamos haciendo aquí.

Hemos declarado el input tipo checkbox de la siguiente forma:

<input
  type="checkbox"
  id={`custom-checkbox-${index}`}
  name={name}
  value={name}
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Aquí, hemos agregado el atributo checked con el correspondiente valor de true o false según lo indique el estado en checkedState.  Así cada checkbox tendrá el valor correcto para su estado de marcado.

También hemos agregado una función que maneja el evento onChange y hemos pasado el index del checkbox, de tal manera que este sea marcado o desmarcado por el método handleOnChange.

El método handleOnChange se ve de la siguiente manera:

const handleOnChange = (position) => {
  const updatedCheckedState = checkedState.map((item, index) =>
    index === position ? !item : item
  );

  setCheckedState(updatedCheckedState);

  const totalPrice = updatedCheckedState.reduce(
    (sum, currentState, index) => {
      if (currentState === true) {
        return sum + toppings[index].price;
      }
      return sum;
    },
    0
  );

  setTotal(totalPrice);
};

Aquí, estamos primero recorriendo el arreglo checkedState usando el método map de los arreglos. Si el valor del parámetro position que ha sido pasado a la función es igual al index de turno, entonces modificamos su valor. Así, si el valor es true entonces será convertido a false usando !item y viceversa.

Si el index no es igual al proveído por el parámetro position, entonces no estamos invirtiendo su valor y devolveremos su valor tal cual se encuentre:

const updatedCheckedState = checkedState.map((item, index) =>
  index === position ? !item : item
);

// the above code is the same as the below code

const updatedCheckedState = checkedState.map((item, index) => {
  if (index === position) {
    return !item;
  } else {
    return item;
  }
});

Usé el operador ternario ?: porque permite que el código sea más corto, pero tú puedes usar el método de los arreglos que prefieras.

Si no estás familiarizado con cómo funcionan los métodos como map o reduce, entonces revisa este otro artículo que escribí.

A continuación, definiremos el arreglo checkedState según lo registrado en el arreglo updatedCheckedState. Esto es importante porque si no actualizas el estado checkedState dentro de la función handleOnChange, entonces no podrás marcar o desmarcar los checkbox.

Esto es así porque estamos usando el valor de checkedState para que los checkbox puedan determinar si están marcados o desmarcados (como un input controlado, tal cual como se muestra a continuación):

<input
  type="checkbox"
  ...
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Mira que hemos creado una variable separada updatedCheckedState y que estamos pasando esta variable a la función setCheckedState. También estamos usando el método reduce sobre updatedCheckedState y no sobre el arreglo checkedState con el estado original.

Esto es porque, por defecto, la función setCheckedState suele actualizar el estado de forma asíncrona.

Sólo porque hallas llamado a la función setCheckedState no se garantiza que vas a obtener el valor actualizado de checkedState en la siguiente línea.

Así que hemos creado una variable separada y la hemos usado para ejecutar el método reduce.

Luego, para calcular el precio total, estamos utilizando el arreglo reduce:

const totalPrice = updatedCheckedState.reduce(
  (sum, currentState, index) => {
    if (currentState === true) {
      return sum + toppings[index].price;
    }
    return sum;
  },
  0
);

El método reduce recibe cuatro parámetros, de los cuales solamente estamos usando tres: sum, currentState e index. Puedes usar nombres diferentes si quieres, ya que son simplemente parámetros.

También estamos pasando 0 como valor inicial, lo que también es conocido como el valor accumulator para el parámetro de suma sum.

Luego, dentro de la función reduce, estamos revisando si el valor actual del arreglo checkedState es true o no.

Si es true, significa que el checkbox está marcado, así que agregaremos el valor del price correspondiente usando la operación sum + toppings[index].price.

Si el valor en el arreglo checkedState es false, entonces no agregaremos su precio y devolveremos el valor previamente calculado de sum.

Así podemos asignar el valor de totalPrice al estado total usando setTotal(totalPrice).

De esta manera estamos calculando correctamente el valor total de los ingredientes seleccionados como ves a continuación:

Aquí hay un link para previsualizar el demo en Sandbox.

¡Gracias por leer!

Muchos desarrolladores pasan dificultades entendiendo cómo trabaja Redux. Pero todo desarrollador que use React debería tener claro cómo trabajar con Redux, ya que los proyectos en la industria usan principalmente Redux para administrar proyectos grandes.

Así que para hacértelo más fácil, he lanzando el curso Mastering Redux.

En este curso aprenderás Redux desde un nivel absolutamente principiante y construirás una food ordering app desde cero usando Redux.

Dale clic a la imagen de abajo para unirte al curso, obtener un descuento con tiempo limitado y mi libro popular Mastering Modern JavaScript gratis.

¿Quieres estar actualizado con contenido regular sobre JavaScript, React y Node.js? Sígueme en LinkedIn.

En JavaScript puedes usar el método .includes() para ver si una cadena (string) existe dentro de otra. Pero, ¿cómo funciona realmente?

En este artículo te presentaré algunos ejemplos en código sobre el método de cadenas en JavaScript llamado .includes().

Sintaxis básica de .includes()

La siguiente es la sintaxis básica del método includes():

str.includes(search-string, optional-position)

El parámetro search-string es la cadena que estás buscando dentro de una cadena a la que hace referencia la variable str.

El parámetro position es un número opcional para indicar a partir de cuál posición de str queremos buscar nuestra cadena. Si se omite este parámetro se asume un valor por defecto de cero.

Si el valor de search-string es encontrado, obtendremos un valor true como retorno de la función. En caso contrario obtendremos un valor false.

Código de ejemplo para el método .includes()

En este primer ejemplo tenemos una oración: "I love freeCodeCamp". Queremos saber si la palabra "love" está incluida en esa oración.

En el código, str sería igual a la cadena "I love freeCodeCamp" y la palabra a buscar, contenida en search-string, sería "love".

"I love freeCodeCamp".includes("love")

Dado que la palabra "love" sí está incluida dentro de la cadena str, entonces el código retorna el valor true.

¿Es el método .includes() sensible a las mayúsculas y minúsculas?

Si modificamos la cadena str al valor "I LOVE freeCodeCamp" y el término a buscar, search-string, sigue siendo "love", entonces el valor que retorna la función es false.

"I LOVE freeCodeCamp".includes('love')

Es false porque el método .includes() es sensible a las mayúsculas y minúsculas. "LOVE" no es lo mismo que "love".

Cómo usar el parámetro opcional de posición

Vamos a modificar nuestro ejemplo para usar el parámetro de posición. Ahora queremos validar si "love" se encuentra dentro de la cadena "I love freeCodeCamp" cuando la búsqueda empieza en la posición 1.

Recuerda que las cadenas tienen una indexación basada en el número cero, lo que significa que la primera letra, "I", tiene un índice de cero.

Nuestro código retornará true debido a que cuando empieza a buscar a partir de la posición 1, la palabra "love" no aparece sino hasta la posición 2, así que está completamente contenida dentro del rango de la cadena en el que estamos buscando.

La cadena, contando a partir de la posición 1 y yendo hasta el final, incluye estos caracteres y espacios:

" love freeCodeCamp"

Recuerda que los espacios en las cadenas reciben su propio índice.

Así luciría nuestro código si usamos el parámetro de posición:

"I love freeCodeCamp".includes('love', 1)

Si cambiamos el parámetro de posición al valor 3, entonces el valor retornado por la función es false.

"I love freeCodecamp".includes('love', 3)

La función retorna false porque la posición 3 es la letra "o".

La cadena, contando a partir de la posición 3 y yendo hasta el final, incluye estos caracteres y espacios:

"ove freeCodeCamp"

Puedes ver que la palabra "love" no se encuentra completa dentro de esta cadena.

Conclusión

En JavaScript puedes usar el método .includes() para ver si una cadena se encuentra dentro de otra.

Esta es la sintaxis básica del método .includes():

str.includes(search-string, optional-position)

Si el término de búsqueda (search-string) es encontrado, la función retorna el valor true. En caso contrario retorna el valor false.

El método .includes() es sensible a mayúsculas y minúsculas, lo que significa que si el término de búsqueda (search-string) no coincide exactamente en este sentido con parte del contenido de la cadena en la que estamos buscando (str), el resultado será un valor false como retorno del método.

El parámetro de posición (position) es un número opcional que corresponde al índice a partir de cuál empezar a buscar en str. Si se omite este parámetro entonces el valor por defecto es cero.

Espero que hayas disfrutado este artículo sobre el método .includes(). Te deseo la mejor de las suertes en tu aprendizaje de JavaScript.

Cuando estés construyendo una aplicación web con React, es muy probable que requieras utilizar íconos. Los íconos son representaciones gráficas de un concepto, una idea, un archivo, un programa, una aplicación, un negocio, entre otros.

También puedes usar íconos para representar la identidad de una funcionalidad. En aquellos lugares donde no quieras escribir el nombre de un programa, un ícono adecuado puede aparecer en lugar del nombre o aplicación para una fácil identificación.

Existen muchas y diferentes librerías de íconos allí afuera, así que, ¿cómo puedes agregarlas a tu aplicación en React? Aprenderemos esto y mucho más en este artículo.

En este artículo aprenderás:

• ¿Qué es la librería 'react-icons'?
• ¿Qué son los íconos de Font Awesome?
• Cómo configurar tu entorno de desarrollo.
• Cómo instalar 'react-icons'.
• Cómo importar 'react-icons'.
• Cómo usar 'react-icons' en tus aplicaciones.
• Cómo usar más de un ícono.
• Cómo hacer render de múltiples íconos de diferentes librerías.
• Cómo ubicar íconos con estilo en línea (inline).
• Cómo modificar los estilos de íconos de Font Awesome en una aplicación de React.
• Bono: código para importar todas la librerías de íconos de 'react-icons'
• Conclusión

¿Qué es 'react-icons'?

'React-icons' es una pequeña librería que te permite añadir íconos (desde distintas librerías de íconos) a tus aplicaciones hechas con React. Te entrega los íconos en tu aplicación como componentes, de tal manera que se hace más fácil trabajar con ellos. También te permite modificar sus estilos, así lograrás que sean consistentes con el estilo general de tu aplicación.

La librería de 'react-icons' usa ES6 para importar los íconos en tu aplicación de React. Lo hace de tal manera que solamente los íconos que realmente vas a utilizar sean lo que se importen de cada librería.

Con 'react-icons', tú sólo necesitas ejecutar un comando para poder utilizar cualquier ícono que quieras de cierta librería. Solamente necesitas escoger el código import correcto y tu ícono estará listo.

'React-icons' funciona con un conjunto amplio de librerías de íconos como Font Awesome, Material UI, Bootstrap, entre otros.

¿Qué son los íconos de Font Awesome?

Existen muchas librerías de íconos, pero una de las más populares es Font Awesome. Font Awesome es una librería o kit de herramientas (toolkit) gráficas que son creadas para comportarse como fuentes.

Los íconos de Font Awesome somo como fuentes de texto normales, pero en lugar de letras obtienes gráficos. Son vectores gráficos escalables (SVGs por sus siglas en inglés), lo cual significa que puedes cambiar sus colores, sus dimensiones y demás sin comprometer su calidad.

Ahora, para usar los íconos de Font Awesome en una aplicación de React sin 'react-icons', tienes que pasar por un proceso largo de instalación de diferentes paquetes usando varias líneas de comando.

Algunas veces puede que incluso necesites instalar el paquete Pro. En ese caso, tienes que importar todos los íconos de forma universal o en archivos individuales. ¿Todo este proceso solamente para instalar unos cuántos íconos en tu página web?

Aquí es donde 'react-icons' aparece para salvar el día. En este artículo, te mostraré cómo usar 'react-icons' para añadir íconos de Font Awesome a tu aplicación de React. Empecemos.

Cómo configurar tu entorno de desarrollo

Sigue los siguientes pasos para configurar tu entorno de desarrollo:

Nota: si ya cuentas con tu configuración lista, no hace falta que repitas el proceso. Simplemente, salta a la siguiente sección.

1. Dirígete a Node.js para descargar e instalar Node si aún no lo has hecho.
2. Abre la terminal de tu equipo.
3. Ingresa este comando: npm i -g create-react-app fonts-app. Este instalará una aplicación de React con todos los paquetes que necesitas para tu proyecto.
4. Luego, ingresa cd fonts-app/. fonts-app es el nombre de la carpeta de tu proyecto. Tu puedes elegir el nombre que quieras. cd fonts-app te llevará adentro de la carpeta de tu proyecto.
5. Una vez dentro, ingresa npm start para iniciar tu proyecto en un servidor de desarrollo.
6. Desde tu editor de código abre la carpeta src de tu proyecto y encuentra el archivo App.js.
7. Elimina el elemento de React que se encuentra renderizado allí por defecto y añade tu propio div, h1 o cualquier otro elemento que tú prefieras (es sólo con fines de ejemplificar).

Ahora ya está todo listo.

Cómo instalar 'react-icons'

Para instalar la librería react-icons , realiza lo siguiente:

• Estando dentro de la carpeta de tu proyecto, abre la terminal de tu editor de código.
• Ejecuta allí el comando npm install react-icons para instalar la librería en la carpeta de tu proyecto.

Esto puede tomar algún tiempo dependiendo de la velocidad de tu sistema. Una vez completo, ya estás listo para usar los íconos.

Cómo importar íconos con 'react-icons'

Ve a la página de 'react-icons'. Verás varias librerías de íconos que puedes utilizar. Cada librería de íconos tiene un código para importarlas. Para este tutorial, nos enfocaremos en la librería de íconos Font Awesome.

El código para importar desde Font Awesome es import { IconName } from "react-icons/fa";.

Código de ejemplo

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

Cómo usar íconos en tus aplicaciones

Sigue los siguientes pasos para usar los íconos de Font Awesome en tu apliación.

1. En App.js, pega el código de importar al principio del archivo o luego del código para importar React.
2. Vuelve a la página de 'react-icons' y elige cualquier ícono de Font Awesome.
3. Haz clic en el ícono para copiarlo.
4. Vuelve a tu código de importar en App.js.
5. Pega y reemplaza IconName por el nombre del ícono que copiaste, dentro de las llaves.
6. Usa el nombre del ícono como el nombre de un elemento de React.

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart } from "react-icons/fa";

class Like extends Component {
  render() {
    return <FaHeart />  
  }
}

export default Like;

Al añadir <FaHeart /> al método render, se muestra el ícono en tu página web. Esto es posible porque ya habíamos importado el ícono al principio del archivo.

Nota: Debes hacer coincidir cualquier ícono que hayas copiado con el código para importar. Es decir, no puedes pegar un ícono de Bootstrap con un código de importar de Font Awesome. Hacerlo así no te dará el resultado correcto.

Cómo usar más de un ícono

Como ya importaste la librería de íconos que querías, no tendrás que hacer un import por segunda vez. Todo lo que tendrás que hacer es volver a la página de 'react-icons', copiar otro ícono que quieras usar y pegarlo dentro de las llaves.

Así es como puedes usar tantos íconos como necesites de la librería Font Awesome.

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart />
      <FaRegHeart />
    </div>
    ) 
  }
}

export default Like

Cómo hacer render de múltiples íconos de diferentes librerías

Existen sutiles diferencias entre las diferentes librerías de íconos. Algunas veces no serás capaz de encontrar todos los íconos que necesitas en una única librería.

En ese caso, puedes usar los íconos de más de una librería. Solamente necesitas importar las librerías de íconos que desees. Por ejemplo, puedes importar tanto Bootstrap como Font Awesome. Luego sólo necesitarás renderizar los íconos igual que antes.

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { BsHeartFill, BsHeart } from "react-icons/bs";

class Icons extends Component {
  render() {
    return (
    <div>
      <FaHeart />
      <FaRegHeart />
      <BsHeartFill />
      <BsHeart />
    </div>
    ) 
  }
}

export default Icons

La habilidad de importar íconos de diferentes librerías te da acceso a un amplio rango de íconos. Siempre puedes encontrar lo que necesitas una vez buscas entre las diferentes librerías de íconos.

Nota: solamente usa los íconos desde múltiples librerías si es absolutamente necesario, o de lo contrario esto podría hacer más lenta tu aplicación.

Cómo ubicar íconos con estilo en línea (inline)

Debes haber notado que los íconos se muestran en bloque (display: block;). Esto es porque hemos ubicado los íconos uno después del otro. Si quieres que se muestren en línea (display: inline;) entonces simplemente ubicalos uno al lado del otro. Mira un ejemplo a continuación:

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { BsHeartFill, BsHeart } from "react-icons/bs";

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart /> <FaRegHeart /> <BsHeartFill /> <BsHeart />
    </div>
    ) 
  }
}

export default Like

Cómo modificar los estilos de íconos de Font Awesome en una aplicación de React

Generalmente, los íconos vienen en un color suave y un tamaño básico que tal vez no sea el adecuado para tu página. Así que tendrás que modificar sus estilos para ajustarlos a tus preferencias.

Los íconos de 'react-icons' son muy fáciles de modificar. Puedes usar los siguientes estilos para estilizar un ícono de 'react-icons':

• Estilos en línea (Inline styles)
• Modificar su tamaño con etiquetas HTML para encabezados (HTML heading tags)
• Objetos de estilo (Object styles)
• Hoja de estilos en cascada (CSS stylesheet)
• Contexto del ícono (Icon context)

Cómo utilizar estilos en línea para estilizar íconos (Inline Styles)

Puedes estilizar un 'react-icon' usando estilos en línea con CSS. Esto significa que aplicarás los estilos dentro de la etiqueta que abre y cierra el elemento.

Usa este método solamente cuando tienes uno o dos íconos por estilizar. También puedes usarlo cuando necesites íconos con diferentes estilos. Mira el código de ejemplo a continuación:

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart style={{color: 'red', fontSize: '50px'}}/>
      <FaRegHeart style={{color: 'green', fontSize: '50px'}}/>
    </div>
    ) 
  }
}

export default Like

Como ves en el ejemplo anterior, estamos pasando el color y el tamaño de fuente (fontSize) a la propiedad style. El primer ícono es un rojo sólido. El segundo ícono tiene su contorno en verde.

Ten en cuenta que el tamaño de fuente está escrito en camel case (camelCase). Las propiedades de CSS con dos palabras se escriben en camel case en lugar de usar el - para separarlas cuando las usamos en JS vanilla. Esta es la convención en React.

Cómo cambiar el tamaño de los íconos con etiquetas de encabezado de HTML

También puedes usar etiquetas de encabezado de HTML para hacer que tus íconos tengan el mismo tamaño que el que le corresponde a la etiqueta que has usado.

Para hacer esto, agrega el elemento de ícono en medio de las etiquetas de apertura y cierre del encabezado.

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

class Like extends Component {
  render() {
    return (
    <div>
      <h1><FaHeart style={{color: 'red'}}/></h1>
 	  <h6><FaRegHeart style={{color: 'green'}}/></h6>
    </div>
    ) 
  }
}

export default Like

En el código anterior hemos añadido dos íconos en medio de etiquetas de encabezado de HTML respectivamente.

Cómo estilizar íconos con objetos de estilo (Object Styles)

Puedes almacenar y usar los estilos que quieras para tus íconos en una variable como propiedades de un objeto. Simplemente, declara un objeto y asigna en él todos los estilos que quieras para los íconos.

Usa este método cuando tienes varios estilos por aplicar a los íconos. También puedes usar este estilo cuando estás apuntando a un ícono en específico. Revisa el siguiente ejemplo:

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

const fontStyles = {color: 'blue', fontSize: '80px'};

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart style={fontStyles}/>
      <FaRegHeart style={fontStyles}/>
    </div>
    ) 
  }
}

export default Like

En el código de ejemplo anterior, almacenamos los estilos que queríamos en un objeto. Luego pasamos el objeto como valor a la propiedad style en el ícono.

Todos los íconos que reciben el objeto de estilos tendrán el mismo estilizado. Así que en el ejemplo anterior, ambos íconos tendrán el mismo color azul y un tamaño de 80px.

Cómo estilizar íconos con hojas de estilo en cascada (CSS stylesheets)

También puedes usar una hoja de estilos (CSS Stylesheet) para estilizar tus íconos. Usar una hoja de estilos es la forma más adecuada cuando tienes múltiples estilos e íconos por incorporar a tu aplicación.

Para usar una hoja de estilos, tienes que importar la hoja de estilos en el archivo donde vas a usar los íconos. Pasa una clase a los elementos de ícono que desees. Estiliza los elementos ícono usando la clase en la hoja de estilos. Revisa el siguiente código de ejemplo:

Código de ejemplo

//style.css file
.yellow{
font-size: 80px;
color: yellow
}

.purple{
font-size: 80px;
color: purple
}

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import "./style.css";

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart className='yellow'/>
       <FaRegHeart className='purple'/>
    </div>
    ) 
  }
}

export default Like

El código de ejemplo muestra una hoja de estilos CSS con estilos sobre dos clases. Importamos esta hoja de estilos en nuestro archivo de React. Pasamos esas clases a los estilos sobre los elementos de React donde los queremos.

Cómo estilizar íconos usando el contexto del ícono

También puedes importar el contexto de íconos de 'react-icons' en lugar de agregar múltiples nombres de clases en diferentes íconos. Así puedes darle al contexto los valores que desees. Agrega los elementos de ícono dentro del contexto como se muestra a continuación:

Código de ejemplo

import React from 'react';
import { IconContext } from "react-icons";

const Like = () => {
  return (
    <IconContext.Provider
      value={{style: { color: '#f4a200', fontSize: '50px' }}}
    >
      <div>
        <FaHeart />
        <FaRegHeart />
      </div>
    </IconContext.Provider>
  );
}
 
export default Like;

En el código de ejemplo, importamos el contexto de íconos de 'react-icons'. Luego usamos una función sin manejo de estado para renderizar los íconos dentro del contexto de íconos.

Observa que el contexto de íconos le ha dado a los íconos una presentación en línea (display: inline;) por defecto. Si quieres que los íconos se mantengan con una presentación en bloque, entonces agrega display: 'block' como una de las propiedades. En otras palabras, puedes pasar cualquier estilo que quieras para las fuentes en la etiqueta del contexto de íconos.

Código para importar todas las librerías de íconos de 'react-icons'

En caso de que quieras usar íconos de otras librerías (además de aquellas que hemos discutido aquí), aquí están sus códigos de importación para que puedas acceder a ellas rápidamente:

import { IconName } from "react-icons/ai"; //Ant Design Icons
import { IconName } from "react-icons/bs"; //Bootstrap Icons
import { IconName } from "react-icons/bi"; //Boxicons
import { IconName } from "react-icons/di"; //Devicon Icons
import { IconName } from "react-icons/fi"; //Feather 
import { IconName } from "react-icons/fc"; //Flat Color Icons
import { IconName } from "react-icons/fa"; //Font Awesome Icons
import { IconName } from "react-icons/gi"; //Game Icons
import { IconName } from "react-icons/go"; //Github Octicons Icons
import { IconName } from "react-icons/gr"; //Grommet-Icons
import { IconName } from "react-icons/hi"; //HeroIcons
import { IconName } from "react-icons/im"; //IcoMoon Free
import { IconName } from "react-icons/io"; //Ionicon4
import { IconName } from "react-icons/io5"; //Ionicon5
import { IconName } from "react-icons/md"; //Material Design Icons
import { IconName } from "react-icons/ri"; //Remix Icons
import { IconName } from "react-icons/si"; //Simple Icons
import { IconName } from "react-icons/ti"; //Typicons
import { IconName } from "react-icons/vsc"; //VS Code Icons
import { IconName } from "react-icons/wi"; //Weather Icons
import { IconName } from "react-icons/cg"; //css.gg

Todas las librerías de íconos disponibles en la página de 'react-icons' se usan de la misma manera que describimos en este artículo.

Conclusión

Los íconos disponibles con 'react-icons' están altamente optimizados, son escalables y fáciles de usar. Espero haber podido ayudarte a aprender su funcionamiento básico para que puedas hacer uso de ellos. Puedes leer la documentación (en inglés) de 'react-icons' para aprender más.