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