CODEWITHSUNDEEP
reactjsstyled-components
designxd10
designxd10

Reputation: 57

React Styled Component SVG styling isn't displaying properly?

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;
      `;


     <SearchIcon>
          <svg
            focusable='false'
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 0 24 24'
          >
            <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' />
          </svg>
        </SearchIcon>

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?

Upvotes: 1

Views: 983

Answers (1)

Drew Reese
Drew Reese

Reputation: 202731

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.

enter image description here

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;
  }
`;

enter image description here

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;
`;

<SearchIcon>
  <svg
    focusable="false"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor" // <-- inherits the current color
  >
    <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
  </svg>
</SearchIcon>

Upvotes: 2

Related Questions