Iconos en React: librerías y SVG

Clase 11 de 34 • Curso de React.js

Clase anteriorSiguiente clase

José Fabián Beltrán Meza

student•

Esto se veía muy feo

osman Perez

student•

jjajajajajaj

Camilo Andrés Granda Cortés

student•

Así lo hice con React Icons:

Primero instalé react Icons

npm install react-icons --save

despues hice el componente DeleteIcon.js.

despues hice el componente CompleteIcon.js.

despues modifiqué el TodoItem.js

y en el css de TodoItem.css

eso es todo. la cuestion es que no sé que tan válido sea.

Alejandro Calderón

student•

Me gusta mucho como quedo el apartado visual.

Julio Peña

student•

Eres un crack, me parece una solución muy buena!

Enrique Villalobos Andrade

student•

React icons: https://react-icons.github.io/react-icons/

Comando:

npm install react-icons --save

Daniel Moreno

student•

en que archivo pegamos esa linea?

Jesus Alejandro Gutierrez Guevara

student•

en vs code abre la consola integrada para la carpeta en donde tienes el proyecto, y ejecutas ese comando

Leopoldo Martinez

student•

Para los que lo estan haciendo con la libreria de react-icons les recomiendo no usar el archivo TodoIcons.js, aumenta la complejidad del codigo. En lugar de eso creen los componentes de cada icono por separado y usenlos directamente sobre su componente TodoItem de esta manera

CompleteTodo.js

import React from 'react'
import {RxCheck} from 'react-icons/rx'


const CompleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCheck
        className={className}
        onClick={onClick}
    />
  )
}

export {CompleteIcon}

DeleteTodo.js

import React from 'react'
import {RxCross1} from 'react-icons/rx'

const DeleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCross1
        className={className}
        onClick={onClick}
    />
  )
}

export {DeleteIcon}

TodoItem

import React from "react";
import "../styles/TodoItem.css";
import { CompleteIcon } from "./CompleteIcon";
import { DeleteIcon } from "./DeleteIcon";

const TodoItem = (props) => {
  const { text, completed, onToggle, onDelete } = props;

  return (
    <li className="TodoItem">
      <div className={`check-container ${completed && "completed"}`}>
        <CompleteIcon
          className={`check ${completed && "completed"}`}
          onClick={onToggle}
        />
      </div>
      <p className={`todo ${completed && "completed"}`}>{text}</p>
      <div className="closer-container">
        <DeleteIcon className="closer" onClick={onDelete} />
      </div>
    </li>
  );
};

export { TodoItem };

Lucia Rodriguez

student•

solucionen los problemas que tienen con la carga de las clases, es imposible estudiar y entender un concepto si cada minuto y medio se pausa la clase y tengo que esperar otros tres minutos para que cargue. Paso una hora con cada clase

Chanel Mariannis Paredes Sánchez

student•

Encarecidamente Platzi!!

Santiago Quintana

student•

el cambio de servidor me salvo, si estaba lento

Facundo Castro

student•

Hasta ahora sigo usando la versión gratuita de FontAwesome. Por ahora, funciona como debe funcionar.

npm i @fortawesome/fontawesome-svg-core 
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome

Nick Jonathan Silva Riascos

student•

Para los que quieran usar react icons los importan tal cual como lo hacen en el video con los SVG , solo que usan el nombre del icono definido por la librería.

import { BsCheck } from "react-icons/bs";
import { TiDelete } from "react-icons/ti";

const iconType = {
    'check': <BsCheck/>,
    'delete': <TiDelete/>
};

function TodoIcon({type}) {
    return <span className={`icon icon-${type}`}>
        {iconType[type]}
    </span>
}

export { TodoIcon };
```import { BsCheck } from "react-icons/bs";import { TiDelete } from "react-icons/ti";
const iconType = {    'check': \<BsCheck/>,    'delete': \<TiDelete/>};
function TodoIcon({type}) {    return \<span className={`icon icon-${type}`}>        {iconType\[type]}    \</span>}
export { TodoIcon };

Rodrigo Damián Martinez

student•

Me salvaste, no sabia como avanzar y solo tenia que usar el nombre del icono definido por la librería.

Gian HM

student•

Si estan usando react-icons, se realiza de la siguiente manera y es más facil

import { BsCheckCircleFill } from "react-icons/bs";
import { BsFillXCircleFill } from "react-icons/bs";
import './TodoItem.css'

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <span
        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
        onClick={props.onComplete}
      >
        <BsCheckCircleFill />
      </span>
      <p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}</p>
      <span
        className="Icon Icon-delete"
        onClick={props.onDelete}
      >
        <BsFillXCircleFill />
      </span>
    </li>
  );
}

export { TodoItem };
```import { BsCheckCircleFill } from "react-icons/bs";import { BsFillXCircleFill } from "react-icons/bs";import './TodoItem.css'
function TodoItem(props) {  return (    \<li className="TodoItem">      \<span        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}        onClick={props.onComplete}      >        \<BsCheckCircleFill />      \</span>      \<p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}\</p>      \<span        className="Icon Icon-delete"        onClick={props.onDelete}      >        \<BsFillXCircleFill />      \</span>    \</li>  );}
export { TodoItem };

Juan Pablo Berrio Berrio

student•

totalmente, que complejo es ponerse a dar vueltas y vueltas cuando puedes hacerlo mas sencillo y rapido

Chanel Mariannis Paredes Sánchez

student•

Super!

Javier Andrés Portilla Rosero

student•

Quedé un poco perdido en cómo se estaba haciendo antes pero lo probé de esta manera y quisiera compartirlo :D

TodoItem.js

import './TodoItem.css';
import { DeleteIcon } from "./DeleteIcon";
import { CompleteIcon } from "./CompleteIcon";

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <CompleteIcon completed={props.completed} onComplete={props.onComplete} />
      <p className={`TodoItem-p ${props.completed && "TodoItem-p-completed"}`}>{props.text}</p>
      <DeleteIcon onDelete={props.onDelete} />
    </li>
  );
}
export { TodoItem };

A continuación CompleteIcon.js

import { GiChainedArrowHeads } from "react-icons/gi";
import React from 'react'

export const CompleteIcon = (props) => {
  return (
    <GiChainedArrowHeads
    className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
    onClick={props.onComplete}
    />
  )
}

A continuación DeleteIcon.js

import React from 'react'
import {GiAnticlockwiseRotation} from "react-icons/gi";

export const DeleteIcon = (props) => {
  return (
    <GiAnticlockwiseRotation
    className={"Icon Icon-delete"}
    onClick={props.onDelete}
    />
  )
}

Jesús Vivas

student•

Me sirvio esta solucion :), gracias

SANTIAGO CANO GONZALEZ

student•

Hasta este momento les queria compartir como realice la app. Utilizando emojis jajajaj

Me gusto bastante agregarle nuevos estilos, pero me genera curiosidad, ahora que entendemos mejor los estados. ¿Cómo evitar los dupliacados de arreglos para diferentes operaciones y de ser posible implementar buenas practicas en react?

Pero como todo, con la practica podemos aprender un monton. Muchas gracias!

Juan Castro

teacher•

A qué te refieres con los duplicados de arreglos, Santi?

Luis Fernando Montoya Garcia

student•

Para los que no pudieron usar los icons aqui les dejo una lista de lo que podrian hacer para usar los iconos de la pagina "React icons"

Paso 1. Instala React Icons Si aun no lo has hecho, instala React Icons en tu proyecto

npm install react-icons

Importa el icono en tu componente: En tu archivo donde estás trabajando (supongamos que es un componente de React), importa el icono que deseas usar:

import React from 'react';
import { CiAlignCenterH } from "react-icons/ci";

Usa el icono dentro de tu JSX: Integra el icono dentro del elemento span en tu JSX:

<p><span><CiAlignCenterH/></span></p>

Espero te pueda servir.....!!!!!

Antonio Pineda

student•

Yo lo pude hacer de otra manera:

function TodoIcon({ type }) { return ( <span className={Icon Icon-svg Icon-${type}} > {type === 'check' && <Check />} {type === 'delete' && <Delete />}

    </span>
);

}

Donovan RM

student•

Bueno revisando los comentarios y lo aprendido en clase logré ambos usos uno con el svg local y otro importando la libreria de react:

npm install react-icons --save

el TodoItem.js

import { DeleteIcon } from './DeleteIcon'
import { CheckIcon } from './CheckIcon'
import './TodoItem.css'

function TodoItem (props) {

    return(
      <li className="TodoItem">
        <label>
          <CheckIcon 
              completed={props.completed}
              onClick={props.onComplete}
          />          
          <p 
            className={`TodoItem-p ${props.completed ? 'TodoItem-p--complete' : ''}`}>
            {props.text}
          </p>
        </label>
        <DeleteIcon 
          onClick = {props.onDelete}  
        />
        
        
      </li>
    );
  }
  export { TodoItem };

el TodoIcon.js:

import { ReactComponent as DeleteSVG } from './quit.svg';
import { BsClipboardCheck } from 'react-icons/bs';


const iconTypes = {
    "check": <BsClipboardCheck />,
    "delete": <DeleteSVG />,
};

function TodoIcon({ type , onClick , completed}) {
    return (
        <span
            className={`Icon Icon-${type} ${completed ? `Icon-${type}--active` : ''}`}
            onClick = {onClick}
        >
            {iconTypes[type]}
        </span>
    )
}

export { TodoIcon };

el CheckIcon.js

import React from 'react';
import { TodoIcon } from './TodoIcon'

function CheckIcon({ completed, onClick}) {
    return (
        <TodoIcon 
            type="check"
            color="gray"
            completed = {completed}
            onClick={onClick}
        />
    );
}

export { CheckIcon };

y el que vimos en clase DeleteIcon.js

import React from 'react';
import { TodoIcon } from './TodoIcon'

function DeleteIcon({onClick}) {
    return (
        <TodoIcon 
            type="delete"
            color="gray"
            onClick={onClick}
        />
    );
}

export { DeleteIcon };

Espero les sirva un poco

Donovan RM

student•

Les envio el Repo https://github.com/IngDonovan/list-todo-react.git

Rubén Ernesto Aragón Gil

student•

Tip:

Cuando vayas a importar un useEffect, useState, useRef no hagas esto:

import React, { useEffect, useState } from "react";

Mejor déjalo así:

import { useEffect, useState } from "react";

Que se quitó, pues, el React. Porque agregar este mismo es redundante.

Andrés Soret Chacin

student•

En esta sección, nos enfocaremos en personalizar íconos en ReactJS para mejorar la apariencia de nuestra aplicación. Utilizaremos una librería de íconos llamada React Icons, aunque también exploraremos cómo crear nuestra propia librería de íconos para íconos personalizados. A continuación, detallamos los pasos:

Librería React Icons

React Icons: Una herramienta popular que facilita la integración de íconos en proyectos React.
Permite la importación sencilla de íconos como componentes, brindando una amplia variedad de opciones, como íconos de Andesign, Bootstrap, Fontosom, GitHub Octicons, Material Design, entre otros.
Se puede integrar fácilmente en aplicaciones React, haciendo que la visualización de íconos sea tan simple como importar y utilizar un componente.

Creación de Íconos Personalizados

Aunque React Icons proporciona una amplia gama de íconos, en algunos casos, es necesario trabajar con íconos personalizados diseñados específicamente para el proyecto.
En el ejemplo, se menciona que el equipo de diseño compartió íconos en formato SVG llamados check.svg y delete.svg.
La personalización de íconos también implica gestionar su posición y color, lo cual se abordará dinámicamente mediante React.

Implementación en ReactJS

Crear Archivo de Iconos Personalizados (todoicon.js):
- Se crea un archivo central para manejar la lógica de los íconos personalizados.
- Este archivo permite importar íconos específicos según el tipo y aplicar propiedades como el color.
Componentes CompleteIcon y DeleteIcon:
- Se crean componentes específicos (CompleteIcon.js y DeleteIcon.js) que importan íconos personalizados y especifican el tipo y el color.
- La personalización incluye el uso de React para manejar dinámicamente la clase de estilo y los sbg.
Lógica de Estilo y Posición:
- Se emplea una lógica sencilla para asignar clases dinámicas y aplicar estilos CSS según el tipo de ícono.
- La propiedad type decide qué ícono renderizar, y las clases de estilo (icon-check o icon-delete) gestionan su posición.
Integración en la Aplicación:
- Se integran los componentes CompleteIcon y DeleteIcon en la aplicación principal.
- Se establecen propiedades como type y color para personalizar la apariencia de los íconos según las necesidades del proyecto.

Próximos Pasos

Continuar explorando y personalizando íconos según el diseño del proyecto.
Adaptar y mejorar la aplicación para cumplir con los estándares de presentación y usabilidad.
Considerar la posibilidad de utilizar React Icons para íconos estándar o explorar otras bibliotecas de íconos populares en el ecosistema de React.

Este enfoque en la personalización de íconos proporciona flexibilidad y control sobre la apariencia de la aplicación, permitiendo adaptarse a los requisitos específicos del proyecto.

Willie David Roa Hidalgo

student•

🙃 Los que estén oscuros sobre SVG, entren acá. 🙂

Nataly Fernandez

student•

duuudeee, y yo importando desde google fonts 😂😂

yeferson soto

student•

tengo una pregunta uso como empaquetador a vite.js y no puedo usar ReactComponent con los svg que soluciones me pueden dar ya que al momento de compilar no funciona no reconoce ReactComponent help plis

Juan Castro

teacher•

Mira: https://dev.to/cassidoo/importing-svg-files-as-react-components-with-vite-l3n

yeferson soto

student•

You should use @svgr/rollup instead of vite-plugin-svgr. vite-plugin-svgr is not a good choice, because it doesn't support svgo, and it use esbuild to transform some svg code, it may have some problem in es5 environment.

The worst thing is vite-plugin-svgr can't add svgo plugin, see this issue: https://github.com/pd4d10/vite-plugin-svgr/issues/49.

//en vite.config.js add:

import svgr from '@svgr/rollup';

export default defineConfig({ plugins: [react(), svgr()] });

Michael Vega

student•

Use tailwindcss para darle más estilo y use react-icons con fontawesome 6.

Leydi Paola Portela Sanchez

student•

me pareció mucha vuelta para insertar un icono . yo lo hice así :

import React from 'react'
import {RxCheck} from 'react-icons/rx'


const CompleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCheck
        className={className}
        onClick={onClick}
    />
  )
}

export {CompleteIcon}

import React from 'react'
import {RxCross1} from 'react-icons/rx'

const DeleteIcon = (props) => {
    const {className, onClick} = props
  return (
    <RxCross1
        className={className}
        onClick={onClick}
    />
  )
}

export {DeleteIcon}

import React from "react";
import "../styles/TodoItem.css";
import { CompleteIcon } from "./CompleteIcon";
import { DeleteIcon } from "./DeleteIcon";

const TodoItem = (props) => {
  const { text, completed, onToggle, onDelete } = props;

  return (
    <li className="TodoItem">
      <div className={`check-container ${completed && "completed"}`}>
        <CompleteIcon
          className={`check ${completed && "completed"}`}
          onClick={onToggle}
        />
      </div>
      <p className={`todo ${completed && "completed"}`}>{text}</p>
      <div className="closer-container">
        <DeleteIcon className="closer" onClick={onDelete} />
      </div>
    </li>
  );
};

export { TodoItem };

import { BsCheck } from "react-icons/bs";
import { TiDelete } from "react-icons/ti";

const iconType = {
    'check': <BsCheck/>,
    'delete': <TiDelete/>
};

function TodoIcon({type}) {
    return <span className={`icon icon-${type}`}>
        {iconType[type]}
    </span>
}

export { TodoIcon };
```import { BsCheck } from "react-icons/bs";import { TiDelete } from "react-icons/ti";
const iconType = {    'check': \<BsCheck/>,    'delete': \<TiDelete/>};
function TodoIcon({type}) {    return \<span className={`icon icon-${type}`}>        {iconType\[type]}    \</span>}
export { TodoIcon };

import { BsCheckCircleFill } from "react-icons/bs";
import { BsFillXCircleFill } from "react-icons/bs";
import './TodoItem.css'

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <span
        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
        onClick={props.onComplete}
      >
        <BsCheckCircleFill />
      </span>
      <p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}</p>
      <span
        className="Icon Icon-delete"
        onClick={props.onDelete}
      >
        <BsFillXCircleFill />
      </span>
    </li>
  );
}

export { TodoItem };
```import { BsCheckCircleFill } from "react-icons/bs";import { BsFillXCircleFill } from "react-icons/bs";import './TodoItem.css'
function TodoItem(props) {  return (    \<li className="TodoItem">      \<span        className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}        onClick={props.onComplete}      >        \<BsCheckCircleFill />      \</span>      \<p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`}>{props.text}\</p>      \<span        className="Icon Icon-delete"        onClick={props.onDelete}      >        \<BsFillXCircleFill />      \</span>    \</li>  );}
export { TodoItem };

import './TodoItem.css';
import { DeleteIcon } from "./DeleteIcon";
import { CompleteIcon } from "./CompleteIcon";

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <CompleteIcon completed={props.completed} onComplete={props.onComplete} />
      <p className={`TodoItem-p ${props.completed && "TodoItem-p-completed"}`}>{props.text}</p>
      <DeleteIcon onDelete={props.onDelete} />
    </li>
  );
}
export { TodoItem };

import { GiChainedArrowHeads } from "react-icons/gi";
import React from 'react'

export const CompleteIcon = (props) => {
  return (
    <GiChainedArrowHeads
    className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
    onClick={props.onComplete}
    />
  )
}

import React from 'react'
import {GiAnticlockwiseRotation} from "react-icons/gi";

export const DeleteIcon = (props) => {
  return (
    <GiAnticlockwiseRotation
    className={"Icon Icon-delete"}
    onClick={props.onDelete}
    />
  )
}

import { DeleteIcon } from './DeleteIcon'
import { CheckIcon } from './CheckIcon'
import './TodoItem.css'

function TodoItem (props) {

    return(
      <li className="TodoItem">
        <label>
          <CheckIcon 
              completed={props.completed}
              onClick={props.onComplete}
          />          
          <p 
            className={`TodoItem-p ${props.completed ? 'TodoItem-p--complete' : ''}`}>
            {props.text}
          </p>
        </label>
        <DeleteIcon 
          onClick = {props.onDelete}  
        />
        
        
      </li>
    );
  }
  export { TodoItem };

import { ReactComponent as DeleteSVG } from './quit.svg';
import { BsClipboardCheck } from 'react-icons/bs';


const iconTypes = {
    "check": <BsClipboardCheck />,
    "delete": <DeleteSVG />,
};

function TodoIcon({ type , onClick , completed}) {
    return (
        <span
            className={`Icon Icon-${type} ${completed ? `Icon-${type}--active` : ''}`}
            onClick = {onClick}
        >
            {iconTypes[type]}
        </span>
    )
}

export { TodoIcon };

import React from 'react';
import { TodoIcon } from './TodoIcon'

function CheckIcon({ completed, onClick}) {
    return (
        <TodoIcon 
            type="check"
            color="gray"
            completed = {completed}
            onClick={onClick}
        />
    );
}

export { CheckIcon };

import React from 'react';
import { TodoIcon } from './TodoIcon'

function DeleteIcon({onClick}) {
    return (
        <TodoIcon 
            type="delete"
            color="gray"
            onClick={onClick}
        />
    );
}

export { DeleteIcon };

Iconos en React: librerías y SVG

Introducción y requisitos

¿Qué necesitas para aprender React.js?

Maquetación con React.js

¿Qué es un componente?

Componentes de TODO Machine

¿Cómo se comunican los componentes? Props y atributos

Estilos CSS en React

Interacción con React.js

Eventos en React: onClick, onChange

¿Qué es el estado?

Contando TODOs

Buscando TODOs

Completando y eliminando TODOs

Librería de Iconos Personalizados

Iconos en React: librerías y SVG

Iconos con colores dinámicos

Herramientas avanzadas: escalabilidad, organización y persistencia

Local Storage con React.js

Custom Hooks

Organización de archivos y carpetas

Feature-First Directories en React

Tips para naming y abstracción de componentes React

¿Qué son los efectos en React?

Estados de carga y error

Actualizando estados desde useEffect

Reto: loading skeletons

¿Qué es React Context?

useContext

¿Qué son los React Portals?

Reto: estados para abrir y cerrar un modal

Maquetando formularios en React

Crear TODOs: React Context dentro de React Portals

Deploy

Despliegue de TODO Machine en GitHub Pages

Presentación de proyectos para tu portafolio

Próximos pasos: React #UnderTheHood

Diferencias entre versiones de React.js

¿Cuándo realmente necesitas React.js?

Bonus: creando proyectos en React desde cero

React con Create React App

React con Next.js

React con Vite