next.js imported svg via babel not scaling [duplicate]

Question

I've been trying to scale my svg icon smaller in my next.js project.

I've imported svg's to my project by adding a file .babelrc with

{
    "presets": ["next/babel"],
    "plugins": ["inline-react-svg"]
}

and adding "babel-plugin-inline-react-svg": "^1.1.1" as a dev dependancy in package.json

However, no matter what I changes I add to my SVG file the SVG always renders as a 100x100 icon. I have tried inspecting the code and can't figure it out image link

svg[Attributes Style] {
    width: 100;
    height: 100;
}

^ Chrome f12 says this and doesn't say when this is set. (So is this default?)

In my SVG file I've tried changing

width=
height=

and then

viewBox=
x=
y=
style="CSS Changes"

Appreciate any help!

Answer 1

For SVG being scalable it must have viewBox defined.