SVG size in react

Try this, it will be working perfectly.

import Logo from "./logo.svg";
            <img
              src={Logo}
              style={{ height: 53, width: 36 }}
              alt="website logo"
            />

If you import a SVG file as a component:

import { ReactElement as ComponentName } from "./file.svg"

You can change the size using CSS transform: scale(2) in <ComponentName />, which in React can be achieved using className or a global CSS file.

Note: To change the color you can use .componentClass path { fill: "color" }, but if you change the scale on .componentClass path it'll not look cool, even if you change the width and height on the component .componentClass, which will actually change the SVG container size and not the content...

Tags:

Css

Svg

Reactjs