We have two SVG elements rendered on the same page, but with different dimensions.


Upon inspection, the difference is caused by a CSS class with the following properties:

.square {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

And in the HTML:

<div class="bg-white square">
  <div class="piece king black">
    <img id="icon6-1" src="/pieces/black-king.svg" alt="black king">
  </div>
</div>

The square class alters the original dimensions of the img based on the parent element's size.



This behavior is most likely related to some module or configuration in Next.js because the same setup in pure React doesn't exhibit this behavior.

Do you have any ideas on why this might be happening?

(Added: I have already tried explicitly setting the dimensions in the CSS, but the issue persists.)
Version 14 or prior.