Maquetación de Botón Editar en Lista de Tareas con React

Dejo el codigo del edit icon, en los recursos aparece incompleto.

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns="https://www.w3.org/2000/svg"
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

Si tienen problemas con los iconos, les recomiendo usar react icons.
Es muy sencillo y práctico de usar

Para quien tenga errores relacionados al edit.svg: en mi caso, lo solucioné eliminando los saltos de línea de la propiedad “d” de la etiqueta <path/> 😉

El .SVG para editar que use de: heroicons

<svg 

   xmlns='https://www.w3.org/2000/svg'
   fill='none' viewBox='0 0 24 24' 
   strokeWidth={1.7} 
   stroke='currentColor' 
   className='w-6 h-6'>

   <path strokeLinecap='round' strokeLinejoin='round' d='M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10' />

</svg>

Botón de editar TODOs

.
Dentro de la carpeta src/ui/TodoIcon crearemos un archivo edit.svg de la siguiente manera.
.

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns=""
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

.
Posteriormente, dentro del archivo index.js en el mismo directorio, vamos a añadir este svg al objeto de iconTypes del componente TodoIcon.
.

import React from 'react';
import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css';

const iconTypes = {
  "check": color => (
    <CheckSVG className="Icon-svg Icon-svg--check" fill={color} />
  ),
  "edit": color => (
    <EditSVG className="Icon-svg Icon-svg--edit" fill={color} />
  ),
  "delete": color => (
    <DeleteSVG className="Icon-svg Icon-svg--delete" fill={color} />
  ),
};

function TodoIcon({ type, color = 'gray', onClick }) {
  return (
    <span
      className={`Icon-container Icon-container--${type}`}
      onClick={onClick}
    >
      {iconTypes[type](color)}
    </span>
  );
}

export { TodoIcon };

.
Creamos un archivo EditIcon.js donde llamamos a TodoIcon pasandole el tipo edit y la función onEdit en onClick como propiedades.
.

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

function EditIcon({ onEdit }) {
  return (
    <TodoIcon
      type="edit"
      onClick={onEdit}
    />
  );
}

export { EditIcon };

.
En el archivo TodoIcon.css agregamos la clase Icon-container--edit y Icon-container:hover .Icon-svg--edit.
.

.Icon-container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  /* background-color: #CCC; */
}
.Icon-container--check {
  position: absolute;
  left: 12px;
}
.Icon-container--edit {
  position: absolute;
  top: -24px;
  right: 48px;
}
.Icon-container--delete {
  position: absolute;
  top: -24px;
  right: 0;
}

.Icon-svg {
  width: 24px;
  height: 24px;
  transition: fill .15s;
}
.Icon-container:hover .Icon-svg--check {
  fill: #4caf50;
}
.Icon-container:hover .Icon-svg--edit {
  fill: #61DAFA;
}
.Icon-container:hover .Icon-svg--delete {
  fill: red;
}

.
Finalmente, solo queda renderizar este botón desde el componente TodoItem de la siguiente manera.
.

import React from 'react';
import { CompleteIcon } from '../TodoIcon/CompleteIcon';
import { EditIcon } from '../TodoIcon/EditIcon';
import { DeleteIcon } from '../TodoIcon/DeleteIcon';
import './TodoItem.css';

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

export { TodoItem };

.
Por lo que tendremos que añadir la render prop onEdit desde el llamado a TodoItem en el componente HomePage, donde en este caso solo mostrará un mensaje que indica que se editará un TODO.
.

function HomePage() {
...
  return (
    ...
        {todo => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onEdit={() => console.log('Editar todo')}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        )}
...
  );
}

export { HomePage };

parece que falto algo en esta clase, aca les dejo el codigo de mi solucion para la funcionalidad del boton de editar en el componente “TodoIcom”.

import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css'

const iconTypes = {
  'check': color => <CheckSVG className='Icon-svg Icon-svg--check' fill={color} />,
  'delete': color => <DeleteSVG className='Icon-svg Icon-svg--delete' fill={color} />,
  'edit':  (color, onEditTwo) => <EditSVG className='Icon-svg icon-svg--edit' fill={color} onClick={onEditTwo}/>,
};

const TodoIcon = ({ type, color = 'gray', joinCrossOutEliminate, onEditTwo }) => {
  return (
    <span
    className={`Icon-container Icon-container-${type}`}
    onClick={joinCrossOutEliminate}
    > 
    {iconTypes[type](color, onEditTwo)}
    </span>
  )
};


export { TodoIcon };

Código de la clase con typescript y react icons

import { FC } from "react"
import { BiCheckCircle, BiEdit } from 'react-icons/bi'
import { TiDelete } from 'react-icons/ti'

import './TodoItem.css'

interface Props {
  text:string,
  completed: boolean,
  onComplete: ()=>void,
  onEdit: ()=>void,
  onDelete: ()=>void
}

const TodoItem:FC<Props> = ({
  text,
  completed,
  onComplete,
  onEdit,
  onDelete
}) => {
  return (
    <li className="TodoItem">
      <BiCheckCircle
        className={`Icon Icon-check ${completed && "Icon-check--active"}`}
        onClick={onComplete}
      />
      <p className={`TodoItem-p ${completed && "TodoItem-p--complete"}`}>{text}</p>
      <BiEdit
        className={`Icon Icon-edit`}
        onClick={onEdit}
      />
      <TiDelete 
        className="Icon Icon-delete"
        onClick={onDelete}
      />
    </li>
  )
}

export { TodoItem }

A mi me pasó que cuando quería cambiarle el color al seg que exporté de Figma no me dejaba.
Al editar el icono svg en VS me di cuenta que tenía una propiedad fill, por lo que se la quité y con eso ya funcionó 😃