A simple method to achieve this task is by utilizing utility css classes. For example, you can add an icon in the jsx file as shown below:
<div className="blue default_icon">ICON</div>
Here is the corresponding css for the above code:
.blue:hover,
.blue:focus {
background-color: #0000ff;
}
.default_icon {
color: rgb(49, 45, 44, 0.8);
}
.default_icon:hover {
transition-duration: 0.2s;
padding: 2.5px;
}
An alternative approach would be using React state. You can create an icon component and pass a color as a prop for better scalability with less css:
import { useState } from 'react';
const Icon = (props) => {
const hoverColor = props.hoverColor;
const [isHover, setIsHover] = useState(false);
const handleMouseEnter = () => {
setIsHover(true);
};
const handleMouseLeave = () => {
setIsHover(false);
};
const hoverStyle = {
backgroundColor: isHover ? hoverColor : "defaultColor",
};
return (
<div
style={hoverStyle}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
ICON
</div>
);
};
export default Icon;
You can now use the icon anywhere in your project like this:
<Icon hoverColor={"#0000ff"} /> // Hovering over this would turn it blue