Javascript 使用StyledComponents设置组件（SVG）的样式

有没有一种方法可以按照以下样式设置导入到react中的SVG组件的样式：

使用样式化组件从“/resources/somerandom.svg”导入{ReactComponent as Icon}

吗？ 我已经将我的一个个人项目切换到样式化组件，由于某种原因，这些样式无法显示在组件上

这就是我所尝试的：

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>
)

从“/resources/somerandom.svg”导入{ReactComponent as Icon}
从“样式化组件”导入样式化
const IconWrapper=styled.svg`
填充物：白色；
宽度：20px；
`
常量随机成分=（）=>(
)

我知道我可以将样式直接传递给SVG组件，但我想要一个使用样式化组件的解决方案。 如果这篇文章没有多大意义，那可能是因为我起床的时间比我记忆中的要长。感谢您的帮助。

鉴于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")
);

从“/github.svg”导入{ReactComponent as Icon}；
从“样式化组件”导入样式化；
//使用包装器，以svg为目标
const IconWrapper=styled.div`
svg{
宽度：500px；
高度：200px；
填充：蓝色；
}
`;
//设置组件的样式（在本例中与styled.svg一样处理）
const StyledIcon=styled（图标）`
宽度：500px；
高度：200px；
填充物：淡紫罗兰；
`;
//使用包装器，以生成的类名为目标
const IconWrapperTargetClassname=styled.div`
${StyledIcon}{
填充物：淡绿色；
}
`;
ReactDOM.render(
,
document.getElementById（“根”）
);

---

这是否回答了您的问题@FatemehQasemkhani我在搜索的时候真的看到了这个。我不喜欢将svg内联的想法，因此这对我来说不是一个有效的解决方案。谢谢你的努力！