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

  

)

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.

user_7882470 · Answer

Given the 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(
  
    <>
      
        
      
      
      
        
      
    
  ,
  document.getElementById("root")
);

Styling ReactComponent (SVG) with StyledComponents

1 Answers