Why react HeroIcons does not take color?

Question

I am trying to use a hero icon from heroicons, in a react project.

import React, { useState } from 'react';
import { MenuIcon, XIcon } from '@heroicons/react/solid';
export const Sidebar = () => {
  const [showSidebar, setShowSidebar] = useState<boolean>(false);
  return (
    <div
      className="flex justify-between items-center 
        p-2 
        m-auto"
    >
      {showSidebar ? (
        <div>
          <XIcon
            onClick={() => setShowSidebar(!showSidebar)}
            className="h-5 w-5 text-white cursor-pointer"
          />
        </div>
      ) : (
        <div>
          <MenuIcon onClick={() => setShowSidebar(!showSidebar)} className="h-5 w-5 text-white" />
        </div>
      )}
      <div
        className={`top-0 left-0 w-[45vw] bg-menubar  p-10 pl-20 text-white fixed h-full z-40 ${
          showSidebar ? 'translate-x-0 ' : 'translate-y-full'
        }`}
      >
        <h2 className="mt-5 text-2xl font-semibold text-white">I am a sidebar</h2>
      </div>
    </div>
  );
};

I am conditionally displaying a sidebar. XIcon is hwoing in my dom.

But it does not take any color.

Answer 1

how about trying with fill-white instead of text-white e.g:

 <XIcon
    onClick={() => setShowSidebar(!showSidebar)}
    className="h-5 w-5 fill-white cursor-pointer"
 />