Icon on button should change color upon hovering over it: can't use existing code on new icon

Issue

I am working on a project that has some features made by third party.

Currently it works about like this:

There is a button that has both a text and an icon image (svg). Originally button is white and text with icon are blue. When I hover my mouse over it, the button changes its color to blue. To avoid button and items on item having same color (and getting non-visible), the one who worked before me also did something that changes text and icon color to white.

Images below:

Now, I was asked for using new image for icon on same button. I used a ready svg-format file for that.

But now, there is a problem. When I hover over button with new icon, only the text changes its color to white, the icon remains blue and disappears upon background.

I am trying to do a research to find what can be the cause of this.

Old icon/file was called "Eye", and the new one I named "Views".

Old icon SVG (sorry I don't know which part is relevant and which not, so a full svg here):

import { FC } from "react";

interface IEye {
  color: string;
}

export const Eye: FC<IEye> = ({ color }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="14"
      height="14"
      viewBox="0 0 14 14"
      className={color}
    >
      <defs>
        <clipPath id="clipPath">
          <rect
            id="Rectangle_136"
            data-name="Rectangle 136"
            width="14"
            height="14"
          />
        </clipPath>
      </defs>
      <g id="eye" clipPath="url(#clipPath)">
        <path
          id="Path_450"
          data-name="Path 450"
          d="M13.575,5.052A7.725,7.725,0,0,0,7,1.106,7.725,7.725,0,0,0,.426,5.052a2.863,2.863,0,0,0,0,3.011A7.725,7.725,0,0,0,7,12.009a7.725,7.725,0,0,0,6.575-3.946,2.863,2.863,0,0,0,0-3.011Zm-.995,2.4A6.6,6.6,0,0,1,7,10.842a6.6,6.6,0,0,1-5.58-3.39,1.7,1.7,0,0,1,0-1.79A6.6,6.6,0,0,1,7,2.273a6.6,6.6,0,0,1,5.58,3.39,1.7,1.7,0,0,1,0,1.79Z"
          transform="translate(-0.001 0.442)"
        />
        <path
          id="Path_451"
          data-name="Path 451"
          d="M5.833,2.917a2.92,2.92,0,1,0,2.061.855,2.917,2.917,0,0,0-2.061-.855Zm0,4.667a1.75,1.75,0,1,1,1.237-.513A1.75,1.75,0,0,1,5.833,7.583Z"
          transform="translate(1.167 1.167)"
        />
      </g>
    </svg>
  );
};

New icon SVG:

import { FC } from "react";

interface IViews {
  color: string;
}

export const Views: FC<IViews> = ({ color }) => {
  return (
            <svg width="22" height="22" viewBox="0 0 22 22" className={color} xmlns="http://www.w3.org/2000/svg">
            <g id="views">
            <path d="M7.74999 21.15C7.29388 21.1463 6.84632 21.0258 6.44999 20.8L4.81999 19.85C4.5234 19.6803 4.26362 19.4532 4.05585 19.1819C3.84809 18.9106 3.69651 18.6006 3.60999 18.27C3.5185 17.9361 3.49437 17.5872 3.53901 17.2439C3.58365 16.9005 3.69616 16.5695 3.86999 16.27L4.30999 15.52C4.09417 15.2002 3.90038 14.8661 3.72999 14.52H2.82999C2.48856 14.5187 2.15072 14.4501 1.83578 14.3183C1.52083 14.1864 1.23494 13.9938 0.99444 13.7514C0.753936 13.5091 0.563524 13.2217 0.434075 12.9057C0.304627 12.5898 0.238679 12.2514 0.239994 11.91V10C0.242891 9.66634 0.311502 9.33652 0.441905 9.02939C0.572309 8.72225 0.76195 8.44382 0.999994 8.21C1.24005 7.96988 1.52547 7.7799 1.83964 7.65114C2.15382 7.52238 2.49047 7.45741 2.82999 7.46H3.70999C3.88164 7.11252 4.07885 6.77827 4.29999 6.46L3.85999 5.67C3.69038 5.37259 3.58165 5.04439 3.54016 4.70454C3.49866 4.36468 3.52523 4.01997 3.6183 3.69048C3.71138 3.361 3.8691 3.05333 4.08228 2.78542C4.29546 2.51751 4.55984 2.29471 4.85999 2.13L6.49999 1.19C6.79806 1.02307 7.1261 0.916522 7.46536 0.876439C7.80463 0.836357 8.14847 0.863526 8.47723 0.956396C8.80599 1.04927 9.11322 1.20601 9.38137 1.41768C9.64952 1.62935 9.87332 1.89179 10.04 2.19L10.47 2.94C10.823 2.92 11.1769 2.92 11.53 2.94L12 2.15C12.171 1.85444 12.3985 1.59546 12.6696 1.38785C12.9407 1.18023 13.2501 1.02805 13.58 0.939999C13.9136 0.845655 14.2629 0.820052 14.6067 0.864746C14.9505 0.909439 15.2816 1.0235 15.58 1.2L17.21 2.14C17.8064 2.48505 18.2415 3.05276 18.4196 3.7184C18.5978 4.38404 18.5044 5.09317 18.16 5.69L17.73 6.45C17.9551 6.7676 18.1557 7.1019 18.33 7.45H19.23C19.9187 7.45791 20.5764 7.73775 21.0597 8.22853C21.543 8.7193 21.8127 9.38122 21.81 10.07V12C21.8021 12.6853 21.525 13.34 21.0386 13.8227C20.5521 14.3054 19.8953 14.5774 19.21 14.58H18.32C18.1561 14.9043 17.9724 15.2182 17.77 15.52L18.22 16.31C18.3869 16.6081 18.4935 16.9361 18.5336 17.2754C18.5736 17.6146 18.5465 17.9585 18.4536 18.2872C18.3607 18.616 18.204 18.9232 17.9923 19.1914C17.7806 19.4595 17.5182 19.6833 17.22 19.85L15.58 20.79C15.2823 20.9583 14.9541 21.0659 14.6146 21.1067C14.275 21.1475 13.9307 21.1206 13.6016 21.0276C13.2725 20.9346 12.9651 20.7774 12.697 20.565C12.429 20.3526 12.2057 20.0892 12.04 19.79L11.6 19.04C11.2273 19.0699 10.8527 19.0699 10.48 19.04L10.02 19.82C9.7941 20.2235 9.46466 20.5595 9.06564 20.7933C8.66662 21.0271 8.21246 21.1502 7.74999 21.15ZM2.84999 9C2.55984 8.99936 2.28055 9.11036 2.06999 9.31C1.96798 9.41258 1.88721 9.53428 1.8323 9.66812C1.77739 9.80197 1.74942 9.94533 1.74999 10.09V11.97C1.76756 12.246 1.88845 12.5053 2.0886 12.6962C2.28875 12.887 2.55345 12.9955 2.82999 13H4.20999C4.35809 12.9976 4.50341 13.0403 4.62666 13.1225C4.7499 13.2047 4.84523 13.3224 4.89999 13.46C5.1331 14.0096 5.43555 14.5271 5.79999 15C5.88933 15.1196 5.94246 15.2623 5.9531 15.4112C5.96373 15.5601 5.93142 15.7089 5.85999 15.84L5.16999 17.01C5.02969 17.2664 4.99044 17.5661 5.05999 17.85C5.13577 18.1289 5.31921 18.3663 5.56999 18.51L7.19999 19.46C7.32515 19.5345 7.4642 19.5828 7.60864 19.6017C7.75309 19.6206 7.89987 19.6098 8.03999 19.57C8.32023 19.4917 8.55993 19.3093 8.70999 19.06L9.39999 17.86C9.47607 17.7326 9.58733 17.6299 9.72038 17.5643C9.85344 17.4987 10.0026 17.4729 10.15 17.49C10.7279 17.56 11.3121 17.56 11.89 17.49C12.0368 17.4665 12.1873 17.4884 12.3213 17.5527C12.4553 17.617 12.5665 17.7208 12.64 17.85L13.32 19.03C13.4646 19.2832 13.7039 19.4686 13.9851 19.5455C14.2664 19.6224 14.5667 19.5844 14.82 19.44L16.45 18.5C16.5767 18.4308 16.6881 18.3366 16.7775 18.2232C16.8669 18.1097 16.9323 17.9794 16.97 17.84C17.0395 17.5561 17.0003 17.2564 16.86 17L16.17 15.8C16.0895 15.6765 16.0467 15.5324 16.0467 15.385C16.0467 15.2376 16.0895 15.0935 16.17 14.97C16.5218 14.5157 16.8142 14.0184 17.04 13.49C17.0893 13.3479 17.183 13.2255 17.3073 13.1409C17.4315 13.0562 17.5798 13.0138 17.73 13.02H19.09C19.3773 13.0314 19.658 12.9318 19.874 12.742C20.0899 12.5521 20.2245 12.2864 20.25 12V10.1C20.2506 9.95533 20.2226 9.81197 20.1677 9.67812C20.1128 9.54428 20.032 9.42258 19.93 9.32C19.8304 9.21603 19.7109 9.13321 19.5786 9.07651C19.4463 9.01981 19.3039 8.99038 19.16 8.99H17.79C17.6417 8.98755 17.4973 8.94174 17.3747 8.85823C17.2521 8.77471 17.1566 8.65714 17.1 8.52C16.8667 7.97457 16.5606 7.46326 16.19 7C16.0999 6.88047 16.047 6.73699 16.0381 6.58755C16.0292 6.43811 16.0647 6.28937 16.14 6.16L16.82 4.98C16.9644 4.72669 17.0024 4.4264 16.9255 4.14513C16.8486 3.86386 16.6632 3.62462 16.41 3.48L14.78 2.5C14.5441 2.3635 14.2644 2.32405 14 2.39C13.7188 2.46638 13.4785 2.64932 13.33 2.9L12.64 4.1C12.5658 4.22917 12.4549 4.33334 12.3214 4.39924C12.1878 4.46513 12.0376 4.48977 11.89 4.47C11.3288 4.40004 10.7612 4.40004 10.2 4.47C10.0538 4.48904 9.9053 4.464 9.77346 4.39808C9.64161 4.33215 9.53246 4.22836 9.45999 4.1L8.73999 2.91C8.59351 2.6588 8.35429 2.47511 8.07379 2.39844C7.79328 2.32177 7.49389 2.35824 7.23999 2.5L5.59999 3.42C5.34708 3.56483 5.16128 3.80331 5.0827 4.08396C5.00412 4.3646 5.03906 4.6649 5.17999 4.92L5.85999 6.13C5.94341 6.26268 5.98255 6.41842 5.97177 6.57478C5.96098 6.73113 5.90084 6.88002 5.79999 7C5.43845 7.4604 5.13609 7.96433 4.89999 8.5C4.84407 8.63681 4.74846 8.75375 4.62548 8.83573C4.5025 8.91772 4.35779 8.961 4.20999 8.96H2.84999V9ZM11 15C10.2089 15 9.43551 14.7654 8.77771 14.3259C8.11992 13.8864 7.60723 13.2616 7.30448 12.5307C7.00173 11.7998 6.92251 10.9956 7.07685 10.2196C7.23119 9.44371 7.61216 8.73098 8.17157 8.17157C8.73098 7.61216 9.44371 7.2312 10.2196 7.07686C10.9956 6.92252 11.7998 7.00173 12.5307 7.30448C13.2616 7.60723 13.8863 8.11992 14.3259 8.77772C14.7654 9.43552 15 10.2089 15 11C15 12.0609 14.5786 13.0783 13.8284 13.8284C13.0783 14.5786 12.0609 15 11 15ZM11 8.5C10.5055 8.5 10.0222 8.64662 9.61107 8.92132C9.19995 9.19603 8.87951 9.58647 8.6903 10.0433C8.50108 10.5001 8.45157 11.0028 8.54803 11.4877C8.64449 11.9727 8.8826 12.4181 9.23223 12.7678C9.58186 13.1174 10.0273 13.3555 10.5123 13.452C10.9972 13.5484 11.4999 13.4989 11.9567 13.3097C12.4135 13.1205 12.804 12.8 13.0787 12.3889C13.3534 11.9778 13.5 11.4945 13.5 11C13.5 10.337 13.2366 9.70107 12.7678 9.23223C12.2989 8.76339 11.663 8.5 11 8.5Z" fill="#3E97FF"/>
            </g>
            </svg>
  );
};

As you see, in new file I added some kind of variable named "color", that existed in old file. If I understand correctly, this allows to set a specific color from outside.

There is an element named Popup with relevant CSS file, upon testing I saw it's indeed files relevant to this button.

CSS block for the button:

  .buttonPrimary {
    ...

    svg {
      margin-left: 10px;
    }

    .color {
      fill: #4fa1f0;
    }

    &:hover {
      @extend %active-button-color;
      color: #fff;

      .color {
        fill: #fff;
      }
    }
  }

I can see that upon hovering, it changes color to white. But not after I set new icon for button!

The Popup.tsx file has following block in return:

  <div className={renderStyle()} onClick={() => setOpen(!open)}>
    <p>{title && title}</p>
    {renderContent()}
  </div>

RenderContent function had the following block for "eye" icon.

  const renderContent = useCallback(() => 
  {
    // ...          
    else if (eye) 
    {   
      return <Eye color={styles.color} />;
    } 

    // ...

  }, []);

I added another else-if block for new icon:

else if (views) 
{   
    return <Views color={styles.color} />;
}  

Since the gauge icon image is displayed correctly, I believe its correct approach.

Render Style function:

  const renderStyle = useCallback(() => {
    if (primary) 
    {
      return Primary;
    } 

    // ...

  }, []);

And finally the code where the button is actually placed on screen and assigned relevant code:

          <div className={styles.ViewsButton} onClick={resetViewsVisibility}>
            <Popup views primary title="Name"  filterShown={viewsShown} >
              <Views
                //... 
              />
            </Popup>
          </div>

What I verified upon researching the issue and what I tried so far:

1. The button still uses "views" and "primary" variables, so the same code is called inside Popup.tsx. I even trying adding an alarm to make sure of it - yes the same function runs in both cases.

2. The item is displayed correctly, so an svg file also called/loaded correctly.

3. The text is recolored upon hover over, the image isn't.

4. I wasn't sure that I shouldn't add anything else to svg, to I tried using only a new svg block in old item's tsx file, I replaced only it and left everything else. After this: the "eye" icon wasn't recolored as well.

5. I think I did replace variable "eye" with "views' everywhere, but maybe I missed something.

6. I believe it variable "color" in icons tsx files is the one that does the trick, but for whatever reason, it doesn't do anything in new file.

7. I considered adding a function that will recolor the icon using "onMouseOver" event, but I think it a bad idea, because there must be a way to use already existing code and second I will still need to get an icon image on it's own, not a button, but what's inside it. So will have to see a separate id for it, load it dynamically and so on.

To summarize: I believe in both cases same code is used, but in new case, the variable "color" is either not set a value in Popup.tsx file, or does nothing in icon tsx file.

I might be missing another place where I should add "Views" in addition to "Eye", but upon searching for "Eye" I didn't find any other places.

Please help me understand what a new icon has different comparing to old one.

Thank you, Evgenie

Solution

It looks that the new icon has fill attribute and you can't change it by css code. You can try set fill to "currentColor" or maybe remove it at all and have icon color set in css only.

fill="currentColor"

Answered By - mfrac