javascript - 使用 StyledComponents 为 ReactComponent (SVG) 设置样式

Question

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

标签： javascriptcssreactjssvgstyled-components

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