No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Quedan menos de 24 hrs para aprender Inglés, AI y más a precio especial.

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
0 Hrs
55 Min
22 Seg
Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Iconos en React: librerías y SVG

11/34
Recursos

Aportes 34

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Esto se veía muy feo

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

Comando:

npm install react-icons --save

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.

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 };

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

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

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}
    />
  )
}

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
Si estan usando react-icons, se realiza de la siguiente manera y es más facil ```js import { BsCheckCircleFill } from "react-icons/bs"; import { BsFillXCircleFill } from "react-icons/bs"; import './TodoItem.css' function TodoItem(props) { return (
  • <BsCheckCircleFill />

    {props.text}

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

    {props.text}\

          \<span        className="Icon Icon-delete"        onClick={props.onDelete}      >        \<BsFillXCircleFill />      \    \
  •   );} export { TodoItem };
    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. ```js import { BsCheck } from "react-icons/bs"; import { TiDelete } from "react-icons/ti"; const iconType = { 'check': <BsCheck/>, 'delete': <TiDelete/> }; function TodoIcon({type}) { return {iconType[type]} } export { TodoIcon }; ```import { BsCheck } from "react-icons/bs";import { TiDelete } from "react-icons/ti"; const iconType = { 'check': \<BsCheck/>, 'delete': \<TiDelete/>}; function TodoIcon({type}) { return \ {iconType\[type]} \} export { TodoIcon };

    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 
    
    1. 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";
    
    1. 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…!!!

    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>
    );
    

    }

    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

    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.

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

    No manches!! lo que react te da también te lo quita. no había visto tanto paso para agregar unos SVG ya voy a hasta perdido de tanto componente que se creo.

    Si son muchos pasos para ti, considera instalar react-icons o usa otras librerías como font-awesome, boxicons, con estas librerias si deseas que sea aún más fácil, solo uso el CDN, que estos proporcionan.

    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

    1. 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.
    2. 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.
    3. 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.
    4. 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.

    Hola estoy intentando el codigo en codesand pero tengo un problema con un plugin. Os mando el Link a ver si me podeis dar una pista de lo que puede ser , gracias <https://codesandbox.io/p/sandbox/10-completando-eliminando-todos-forked-lt42tl?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpj3fc4j00073b6ijwhwd5pu%2522%252C%2522sizes%2522%253A%255B87.63959390862945%252C12.36040609137055%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpj3fc4j00033b6isi8wr7h3%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpj3fc4j00043b6ixe4lh37l%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpj3fc4j00063b6iu67lckd2%2522%257D%252C%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clqrdr2od00823b6ivnsj6csw%2522%257D%255D%252C%2522sizes%2522%253A%255B60%252C40%255D%257D%255D%252C%2522sizes%2522%253A%255B68.2466389759131%252C31.7533610240869%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpj3fc4j00033b6isi8wr7h3%2522%253A%257B%2522id%2522%253A%2522clpj3fc4j00033b6isi8wr7h3%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clqzvgadm00023b6hh62t7vcc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A3%252C%2522startColumn%2522%253A34%252C%2522endLineNumber%2522%253A3%252C%2522endColumn%2522%253A34%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FTodoList.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clr6udxor00023b6hz7ynuzwv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A10%252C%2522startColumn%2522%253A10%252C%2522endLineNumber%2522%253A10%252C%2522endColumn%2522%253A10%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FTodoItem.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clr6udxor00023b6hz7ynuzwv%2522%257D%252C%2522clpj3fc4j00063b6iu67lckd2%2522%253A%257B%2522id%2522%253A%2522clpj3fc4j00063b6iu67lckd2%2522%252C%2522activeTabId%2522%253A%2522clpj3fc4j00053b6ixt441t31%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpj3fc4j00053b6ixt441t31%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522SANDBOX_INFO%2522%252C%2522id%2522%253A%2522clpj3thcs00f93b6iclhc119w%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clpj3fc4j00043b6ixe4lh37l%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clpj3fc4j00043b6ixe4lh37l%2522%257D%252C%2522clqrdr2od00823b6ivnsj6csw%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clqrdr0oa007z3b6inzcuteur%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522SANDBOX_INFO%2522%257D%255D%252C%2522id%2522%253A%2522clqrdr2od00823b6ivnsj6csw%2522%252C%2522activeTabId%2522%253A%2522clqrdr0oa007z3b6inzcuteur%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D>
    No encuentro los recurso de los iconos svg :(
    Este clase me mostro lo malo que habia sido mi codigo
    Buenas tardes, el profe Juan hace referencia constantemente a los archivos de curso, sin embargo, al revisar no veo ningun adjunto en esa sección. No están los archivos de recursos?
    Hay páginas que ofrecen descargar sus iconos con React y usarlos en tu página. Únicamente es cuestión de instalar, importar y meterlos como el profe los agrega. en este caso, considero que ya es cuestión del equipo de trabajo y las tareas que te dejan. En el proyecto que estoy, no me dejan meter iconos que no sean de https://iconoir.com/

    La solucion aburrida:

    import "./TaskItem.css";
    import "../ButtonClose/ButtonClose.css";
    function TaskItem(props) {
      return (
        <li className="TaskItem">
          <span className="TaskItem-Icon" onClick={props.onComplete}>
            {props.done === true ? "✅" : "⬜"}{" "}
          </span>
          <p
            className={`TaskItem-Task ${
              props.done ? " TaskItem-Task--complete" : ""
            }`}
          >
            {props.title}
          </p>
          <button type="button" className="ButtonClose" onClick={props.onRemove}>
            x
          </button>{" "}
        </li>
      );
    }
    
    export default TaskItem;
    

    From: Rincon del vago

    Así lo hice

    **AQUI ! Los SVG** *check.svg* ```js <svg viewBox="0 0 405.272 405.272" xml:space="preserve"> <path d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836 c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064 c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z"/> </svg> ```*delete.svg* ```js <svg viewBox="0 0 348.333 348.334" xml:space="preserve"> <path d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85 c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563 c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85 l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554 L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z"/> </svg> ```
    Dejo por aquí mi desarrollo del reto opcional `import React from 'react'` `const TodoCounter = (props) => {  ` ``const text = props.completed == props.total ?   `Felicitaciones haz completado todos los TODO´s` :   `Has completado ${props.completed} de ${props.total} TODO´s`;    `` `return (    <h1 style={{        fontSize:"24px",        textAlign: "center",        margin: 0,        padding: "48px"    }}>{text}  )` `}` `export default TodoCounter`

    Cambiando los iconos, es otra cosa

    que lata hacer la wea de nuevo pq estaba en el otro curso antiguo de react

    por saltarme las dos clases de como trabajar con SVGs me tuve que regresar desde el curso react-reuter donde agregan el svg de editar jajajaj

    Va quedando 😎 ![](https://static.platzi.com/media/user_upload/Todo_Web-56fb1a38-b3e5-444c-a983-a31bd0555a7a.jpg)
    Hola, una consulta, a alguien le ocurre que no puede visualizar los recursos?

    Para desmarcar las completadas sin tanto codigo!!

    const completeTodo = (text) => {
    const newTodo = […toDo];
    const toDoIndex = newTodo.findIndex(
    (todo) => todo.text == text
    );
    newTodo[toDoIndex].completed = !newTodo[toDoIndex].completed;
    setTodo(newTodo);
    }

    detesto la nueva version de la app !!

    En mi caso lo había hecho de esta forma, utilizando operadores ternarios para asignarles las clases a mis button y de esa forma poder estilar los icons, ¿debería cambiar el código?

    import {PiCheckFatFill} from "react-icons/pi";
    import {ImCross} from "react-icons/im"
    import './ToDoItem.css';
    
    
    function ToDoItem({text, completed, onComplete, onDelete}) {
    
        const iconCheked = completed ? 'item-button  item-button-check--active' : `item-button item-button-check`;
        const iconDelete = completed ? 'item-button  item-button-delete-check--active' : `item-button item-button-delete`;
    
        return(
            <li className={`item-li ${completed && "item-li-completed"}`}>
                <span className='item-span'>
                    <div className='item-container-button-check'>
                            <button className={iconCheked}
                            onClick={onComplete}><PiCheckFatFill /> </button>
                    </div>
                    <p className={`item-p ${completed && "item-p--active"}`}>
                        {text}
                    </p>
                </span>
                <span>
                    <div className='item-container-button-delete'>
                        <button className={iconDelete} onClick={onDelete}>
                            <ImCross /> 
                        </button>
                    </div>
                </span>
            </li>
            );
        }
    
    export {ToDoItem} 
    
    .item-container-button-check {
        height: auto;
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .item-button {
        height: 20px;
        width: auto;
        padding: 0;
        font-size: 22px;
        background-color: transparent;
        border: none;
    }
    .item-button:hover {
        cursor: pointer;
    }
    
    .item-button-check {
        color: #5fa01d;
    }
    .item-button-check:hover {
        color: #2c2c2c;;
    }
    .item-button-delete {
        font-size: 18px;
        color: #fc3a51;
    }
    .item-button-delete:hover {
        opacity: 0.7;
    } 
    .item-button-check--active {
        color: #2c2c2c;
    }
    .item-button-delete-check--active {
        color: #2c2c2c;
        font-size: 18px;
    }```