使用StyledComponents为React组件（SVG）添加样式

Question

有没有一种方法可以使用styled components样式化导入到React中的SVG组件，例如以下方式：
import { ReactComponent as Icon } from "./resources/somerandom.svg"？ 我已经将我的个人项目转换为styled components，但是无论什么原因，样式都无法显示在组件上。

我尝试过以下做法:

import { ReactComponent as Icon } from "./resources/somerandom.svg"
import styled from "styled-components"

const IconWrapper = styled.svg`
     fill: white;
     width: 20px;
`

const RandomComponent = () => (
<IconWrapper>
  <Icon/>
</IconWrapper>
)

我知道可以直接将样式传递给SVG组件，但我想要一个使用styled components的解决方案。 如果这篇文章让人感到困惑，可能是因为我已经醒来了很长时间了。谢谢大家的帮助。

- prismo

---

这个回答解决了你的问题吗？使用Styled Components改变SVG描边的颜色 - Fatemeh Qasemkhani

@FatemehQasemkhani 我在搜索时看到了这个。我不喜欢内联我的SVG，所以这对我来说不是一个有效的解决方案。不过还是谢谢你的努力！ - prismo

Answer 1

鉴于SVG：

<svg width="24" height="24" viewBox="0 0 24 24" fill="#868686" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.2467C9.62547 2.2468 7.32846 3.09181 5.51996 4.63055C3.71146 6.16928 2.5095 8.30132 2.12913 10.6452C1.74876 12.989 2.21481 15.3918 3.4439 17.4235C4.67298 19.4551 6.58488 20.9832 8.83752 21.7342C9.33752 21.8217 9.52502 21.5217 9.52502 21.2592C9.52502 21.0217 9.51251 20.2342 9.51251 19.3967C7 19.8592 6.35 18.7842 6.15 18.2217C5.92807 17.6747 5.57627 17.1898 5.125 16.8092C4.775 16.6217 4.275 16.1592 5.11249 16.1467C5.43227 16.1814 5.73898 16.2927 6.00663 16.4711C6.27427 16.6495 6.49496 16.8899 6.65 17.1717C6.78677 17.4174 6.97068 17.6337 7.19119 17.8082C7.4117 17.9827 7.66447 18.112 7.93503 18.1886C8.20559 18.2652 8.48861 18.2877 8.76788 18.2548C9.04714 18.2219 9.31717 18.1342 9.56248 17.9967C9.60577 17.4883 9.83234 17.013 10.2 16.6592C7.975 16.4092 5.65 15.5467 5.65 11.7217C5.63594 10.7279 6.00268 9.76631 6.675 9.03423C6.36928 8.17045 6.40505 7.22251 6.775 6.38423C6.775 6.38423 7.61247 6.12172 9.525 7.40923C11.1613 6.9592 12.8887 6.9592 14.525 7.40923C16.4375 6.10923 17.275 6.38423 17.275 6.38423C17.645 7.2225 17.6808 8.17046 17.375 9.03423C18.0493 9.76505 18.4164 10.7275 18.4 11.7217C18.4 15.5592 16.0625 16.4092 13.8375 16.6592C14.0761 16.9011 14.2599 17.1915 14.3764 17.5107C14.4929 17.83 14.5393 18.1705 14.5125 18.5092C14.5125 19.8468 14.5 20.9217 14.5 21.2592C14.5 21.5217 14.6875 21.8342 15.1875 21.7342C17.4362 20.9771 19.3426 19.4455 20.5664 17.4127C21.7903 15.38 22.2519 12.9785 21.8689 10.6369C21.4859 8.29535 20.2832 6.16607 18.4755 4.62921C16.6678 3.09235 14.3727 2.24794 12 2.2467Z"/>
</svg>

我们希望针对一些SVG属性进行定位，有很多方法：

import { ReactComponent as Icon } from "./github.svg";
import styled from "styled-components";

// With wrapper, target the svg
const IconWrapper = styled.div`
  svg {
    width: 500px;
    height: 200px;
    fill: blue;
  }
`;

// Style the component (treated like styled.svg in this case)
const StyledIcon = styled(Icon)`
  width: 500px;
  height: 200px;
  fill: palevioletred;
`;

// With wrapper, target the generated className
const IconWrapperTargetClassname = styled.div`
  ${StyledIcon} {
    fill: palegreen;
  }
`;

ReactDOM.render(
  <React.StrictMode>
    <>
      <IconWrapper>
        <Icon />
      </IconWrapper>
      <StyledIcon />
      <IconWrapperTargetClassname>
        <StyledIcon />
      </IconWrapperTargetClassname>
    </>
  </React.StrictMode>,
  document.getElementById("root")
);

- Dennis Vash