更改 svg 动态样式组件的填充颜色

Question

I'm trying to target the fill property of my svg via css in styled-components but to no success.

This is my svg

<svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.8667V13.7334H6.83075H13.6615V6.8667V0H6.83075H0V6.8667ZM34.2257 6.8667V13.7334H41.0564H47.8872V6.8667V0H41.0564H34.2257V6.8667ZM9.47623 4.36809L9.4552 4.92533L8.50249 4.94546L7.54978 4.96542V7.44408V9.92256H6.83075H6.11173V7.44408V4.96542L5.15902 4.94546L4.20631 4.92533L4.18527 4.36809L4.16424 3.81084H6.83075H9.49726L9.47623 4.36809ZM41.9414 3.91815C45.0675 4.73227 45.0675 9.00113 41.9414 9.81525C41.6333 9.8956 41.1073 9.92256 39.8549 9.92256H38.1803V6.8667V3.81084H39.8549C41.1073 3.81084 41.6333 3.8378 41.9414 3.91815ZM17.1128 11.1809V18.0476H23.9436H30.7743V11.1809V4.31416H23.9436H17.1128V11.1809ZM51.3385 11.1809V18.0476H58.1693H65V11.1809V4.31416H58.1693H51.3385V11.1809ZM39.6184 6.8667V8.77212H40.4722C42.1033 8.77212 42.7981 8.20301 42.7981 6.8667C42.7981 5.53039 42.1033 4.96128 40.4722 4.96128H39.6184V6.8667ZM24.8519 8.15304C26.4692 8.58374 27.4607 10.08 27.1943 11.6878C26.6101 15.2135 21.1343 15.1689 20.6341 11.6344C20.3085 9.33458 22.4991 7.52659 24.8519 8.15304ZM59.0776 8.15304C60.6948 8.58374 61.6864 10.08 61.42 11.6878C60.8358 15.2135 55.36 15.1689 54.8598 11.6344C54.5342 9.33458 56.7247 7.52659 59.0776 8.15304ZM23.3477 9.37772C22.5318 9.5972 22.0475 10.3193 22.0862 11.2585C22.1877 13.7233 25.7723 13.6477 25.7723 11.1809C25.7723 9.86019 24.652 9.02701 23.3477 9.37772ZM57.5734 9.37772C56.7574 9.5972 56.2732 10.3193 56.3118 11.2585C56.4134 13.7233 59.9979 13.6477 59.9979 11.1809C59.9979 9.86019 58.8777 9.02701 57.5734 9.37772Z" fill="#1F1F2A"/>
</svg>

This is how I'm using it:

export const Logo = styled.svg`
  background-image: url('./logo.svg');
  background-repeat: no-repeat;
  background-size: contain;
  height: 2em;
  & path {
    fill: #a4a4bc;
  }
  @media ${devices.desktop}{
    height: 3.4em;
  }

`

This is how I import and use it

import {
  Logo
} from '../styles/pages/home'

<LogoWrapper>
  <Logo />
  <legend>{formatter(homeContent[locale].title)}</legend>
</LogoWrapper>

I've tried other variations to change the fill, none of which worked. Any ideas?

Answer 1

Using react-inlinesvg I manage to make it work

import SVG from 'react-inlinesvg'

export const Logo = styled(SVG)`
  & path {
    fill: #a4a4bc;
  }
  @media ${devices.desktop}{
    height: 3.4em;
  }

`

Answer 2

You should remove background properties like background-image from styles. because svg is a vector and no need to set image for it again except in special situations.

You can extend LogoWrapper component to style the svg image like below:

export const StyledLogoWrapper = styled(LogoWrapper)`
  svg {
    height: 2em;
    & path {
      fill: #a4a4bc;
    }
    @media ${devices.desktop}{
      height: 3.4em;
    }
  }
`