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

Question

我试图通过样式组件中的 css 来定位我的 svg 的属性填充，但没有成功。

这是我的 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>

我是这样使用它的：

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

`

这就是我导入和使用它的方式

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

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

我尝试了其他变体来更改填充，none 的方法有效。有什么想法吗？

Answer 1

您应该从样式中删除背景属性，例如背景图像。因为 svg 是一个矢量，除非特殊情况，否则不需要再次为其设置图像。

您可以扩展 LogoWrapper 组件来设置 svg 图像的样式，如下所示：

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

Answer 2

使用 react-inlinesvg 我设法让它工作

import SVG from 'react-inlinesvg'

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

`

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

Change fill collor for svg dynamically styled-components

javascript

css

svg

reactjs

styled-components