使用样式化组件样式化 React 组件 (SVG)

Posted 2023-03-16

【中文标题】使用样式化组件样式化 React 组件 (SVG)

【英文标题】：Styling ReactComponent (SVG) with StyledComponents

【发布时间】：2020-09-26 04:30:15

【问题描述】：

有没有办法按照以下样式设置导入到 react 中的 SVG 组件的样式：import ReactComponent as Icon from "./resources/somerandom.svg" 使用样式化组件？ 我一直在将我的个人项目切换到样式化组件，但由于某种原因，样式无法在组件上显示。

这是我尝试过的：

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 组件，但我想要一个使用样式组件的解决方案。 如果这篇文章没有多大意义，那可能是因为我工作的时间比我记得的要长。感谢大家的帮助。

【问题讨论】：

这能回答你的问题吗？ Using Styled Components to change the color of an SVG's stroke

@FatemehQasemkhani 我在搜索时实际上看到了这个。我不喜欢内联我的 svg 的想法，所以这对我来说不是一个有效的解决方案。不过感谢您的努力！

【参考方案1】：

鉴于 SVG：

<svg   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")
);