Setting IconContext.Provider cursor value? (This is being used with react-icons)

Question

I know I can just inline style the cursor: "hover" onto the element in this Example, but there should be a way to make all icons in an element to contain the pointer cursor using IconContex.Provider from react-icons

       return (
        <>
            <IconContext.Provider value={{
                color: "red",
                size: "1.2em",
                cursor: "pointer"
            }}>
                <StyledTask>
                    <h3 className="ms-2" >{task.text} <FaTimes onClick={() => { onDelete(task.id) }}></FaTimes></h3>

                    <p className="ms-2 mt-2">{task.day}</p>
                </StyledTask>
            </IconContext.Provider>
        </>
    )
}

Answer 1

Just add pointer under style property, or as a className:

.withPointer {
  cursor: 'pointer';
}

const App = () => {
  return (
    // Use style or className
    <IconContext.Provider
      value={{ color: "blue", style: { cursor: "pointer" }, className: 'withPointer' }}
    >
      <div>
        Hello <FaBeer />
      </div>
    </IconContext.Provider>
  );
};