How to give hover effect on svg in next?

Question

I am using this right now with tailwindcss but it's not working Please suggest me any way to give hover effect on svg

<Image className="hover:fill-black" src={IconCopy} alt="Copy_icon" /></div>

Answer 1

You cannot apply hover effect for SVGs when you are using it in img tag.

Try creating a separate component and apply the class there,

for example,

const CopyIcon = ({ className }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
      />
    </svg>
  );
};

export default CopyIcon;

and use it as

<CopyIcon className="w-5 h-5 hover:fill-black">

Note: To get the SVG's code, you can simply open it in your text editor. Make sure convert that to jsx syntax with replacing the attribute name (Eg. className instead of class) using some tools.