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

How about creating a custom CSS class and add `cursor: pointer;`? — hisam, Sep 18 '21 at 15:12
I could do that, but then I would have to add the class to every "theoretical" Icon I'm using in an app. So at that point, I could just inline style it. — Wayne, Sep 18 '21 at 15:14
I see. I know what's your goal is. But I think, creating a class is the best approach now. Because we can't select `IconContext.Provider` tag and apply some CSS on it. — hisam, Sep 18 '21 at 15:35

Dennis Vash · Accepted Answer · 2021-09-18T15:25:57.330

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

edited Sep 18 '21 at 15:25

answered Sep 18 '21 at 15:19

Dennis Vash

50,196
9
100
118

Thank you so much. I see now that value is just changing presets and adding the style tags allows you to add inline styling to the IconContex – Wayne Sep 18 '21 at 15:36

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

1 Answers1