How to remove the fixed size of SVG?

Question

css

Good day.
I am embedding svg into the page inline - the client studio insisted on such display of icons, and I'm used to sprites.
Using GULP.js, I create an svg sprite, embed it on the page, and then, when I need an icon, I call it:

<i class="icon">
  <svg class="icon__svg icon-light">
    <use x="0" y="0" xlink:href="#icon-light" />
  </svg>
</i>

Everything would be fine, but the container <svg></svg>has its own width of 300x150 pixels.
That is, if I set the width, then the height will remain 150, if I set the height, then the width will remain 300. But I need to specify one parameter, and the icon itself is already scaled.
Here is an example: codepen.io/denisbookreev/pen/NNmELb

Answer 1

Scaling svg is not so easy. The problem is described here