React Styled Component SVG styling isn't displaying properly?

Question

So, I am trying to change the color of my svg icon, but it isn't changing color. When I inspect the page, it clearly shows the color is showing in the CSS and it is not crossed out, yet it is just a default black color.

Here is my code,

      const SearchIcon = styled.span`
        color: #9aa0a6;
        height: 44px;
        width: 33px;
        padding-right: 10px;
        display: flex;
        align-items: center;
      `;

I don't get why my svg isn't changing color. Even if I nest it inside, it doesn't do anything.

For example

      const SearchIcon = styled.span`
        color: #9aa0a6;
        height: 44px;
        width: 33px;
        padding-right: 10px;
        display: flex;
        align-items: center;

       svg {
       color: red;
       }
      `;

and this still does nothing to the color.

Any idea why my svg isn't getting styled?

user_8690857 · Answer

According to the docs it seems the color attribute should provide an indirect currentcolor value, but I'm not exactly sure why it's not inherited either. Well, the color attribute is inherited all the way through to the path element, but isn't actually changing the color.

You can specify the fill CSS rule as well.

const SearchIcon = styled.span`
  color: #9aa0a6;
  height: 44px;
  width: 33px;
  padding-right: 10px;
  display: flex;
  align-items: center;

  & svg {
    fill: #9aa0a6;
  }
`;

Update

Tip of the hat to @SeanW.

The color CSS rule only sets the "currentColor" value, but you must still explicitly set the fill, stroke, stop-color, flood-color, and lighting-color attributes manually to "currentColor".

const SearchIcon = styled.span`
  color: #9aa0a6;
  height: 44px;
  width: 33px;
  padding-right: 10px;
  display: flex;
  align-items: center;
`;

React Styled Component SVG styling isn't displaying properly?

1 Answers

Update