failed to resize svg in react

Question

Why I'm not able to resize imported svg in this case? I tried to remove the width and height value on the svg itself but doesn't work too.

const Wrap = styled.div`
  svg {
    width: 40px;
    path {
      fill: red;
    }
  }
`;

export default function App() {
  return (
    <div className="App">
      <Wrap>
        <Logo />
      </Wrap>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

https://codesandbox.io/s/pensive-river-ertf8?file=/src/App.js:145-423

Answer 1

Your problem is your SVG. It has a fixed height and width defined on it, but no viewBox. So change the opening tag to this:

<svg xmlns="http://www.w3.org/2000/svg" height="1000" width="1000" viewBox="0 0 1000 1000" xmlns:xlink="http://www.w3.org/1999/xlink">

Then in your component, set the height and width in the styled component to scale it, eg

const Wrap = styled.div`
  svg {
    width: 40px;
    height: 40px;
    path {
      fill: red;
    }
  }
`;

Now the SVG will scale with the width/height properties