my icons are imported and stored on a separate file.js i imported the file.js on my .jsx file & i can see the svgs being rendered on my website i also can change the size but the color remains black no matter what i tried.

I’m using ” react-icons/tb | react-icons/gi | react-icons/fa | react-icons/fa6 | react-icons/bi | react-icons/bs | react-icons/io5 | react-icons/md | react-icons/pi | react-icons/tb | react-icons/gi | react-icons/ai “

if anyone can help it would be much appreciated. thank you

here’s my .jsx code of the icons part :
<Slider {...settings} className="categories_list"> {categories?.slice(1, 9).map((category, index) => ( <Link to={`/listings/category/${category.label}`} key={index}> <div className="category"> <img src={category.img} alt={category.label} /> <div className="overlay"></div> <div className="category_icon"> {category.icon} <p>{category.label}</p> </div> </div> </Link> ))} </Slider>

and here is the .scss code:

&_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;

        svg {
          font-size: 60px;
          color: #fff;
        }

        p {
          font-weight: 600;
          text-transform: capitalize;
          color: inherit;
        }
 } ```