Styling ReactComponent (SVG) with StyledComponents

Question

Is there a way to style SVG components imported into react following this style:
import { ReactComponent as Icon } from "./resources/somerandom.svg"
using styled components? I have been switching over a personal project of mine to styled components and for some reason, the styles fail to show on the component.

This is what I tried:

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

I am aware that I can pass the styles directly to the SVG component but I want a solution that uses styled components. If this post isn't making a lot of sense, it's probably because I've been up for longer than I can remember. Thanks for all the help.

Answer 1

Given the 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>

We want to target some SVG properties, there are plenty of ways:

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