Actualizar los tamaños de los iconos de reacción

Los componentes HTML con iconos no son raros cuando se crean aplicaciones complicadas. La sintaxis para usar íconos y establecer tamaños de íconos probablemente le resulte familiar si está familiarizado con HTML y CSS.

En este artículo, aprenderemos cómo lograr esto en ReactJS actualizando los tamaños de los íconos.

Actualizar los tamaños de los iconos de reacción

La mayoría de los desarrolladores de React usan JSX, una sintaxis única para crear definiciones de componentes sencillas. Dado que su sintaxis es similar a HTML, la mayoría de los ingenieros de React la prefieren.

Sin duda, está acostumbrado a alterar el tamaño de los iconos en HTML mediante el uso de clases. El atributo tamaño en JSX debe establecerse en un número.

Una definición fácil con el atributo tamaño sería la siguiente:

<FaBeer size={24} />

Se puede usar una expresión de JavaScript que produzca un número entero para establecer el atributo tamaño en ese valor. Sería útil si encerrara las expresiones entre corchetes para garantizar que se reconozcan correctamente como código JavaScript.

Veamos una ilustración a continuación:

import {FaBeer} from 'react-icons/fa';
const sizeValue = 14 * 5;
<FaBeer size={sizeValue} />
<FaFacebook size={sizeValue}></FaFacebook>

En esta ilustración, combinamos un icono de “tamaño” estándar con un valor entero que se puede almacenar dinámicamente en una variable. Nuestro atributo tamaño será igual al entero 70 después de evaluar la ecuación.

Ahora, ejecute la línea de código anterior en Replit, que es compatible con React.js. Mostrará el siguiente resultado. También puede encontrar su demostración aquí.

Producción:

Puede encontrar más información sobre los iconos de reacción aquí.