Article Preview Component - Next.js/Tailwind/TypeScript

Hi, you worked hard to complete the challenge! After checking the functionality on your site and reviewing the code, I noticed that the SVG isn't changing properly. To control the SVG as you want, it's better to use the SVG code directly like this:

interface ShareIconProp {
  fill: string;
}

function ShareIcon({ fill }: Readonly<ShareIconProp>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13">
      <path
        fill={fill}
        d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"
      />
    </svg>
  );
}

export default ShareIcon;

In my case, I imported the SVG code directly and used it as a component. For Facebook, Twitter, and Pinterest icons, I didn't need to go this far, but if necessary, I would have created them in a similar way.

Happy coding!