1

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!

Sporego
  • 376
  • 4
  • 12
  • 1
    Does this answer your question? [How can I make an svg scale with its parent container?](https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container) – Beto Frega Apr 24 '21 at 17:50

1 Answers1

0

For SVG being scalable it must have viewBox defined.

Sergey Pogodin
  • 406
  • 2
  • 6