I used to size my inline SVGs via CSS (width / height) and that’s all working fine until I run yarn build:production
– all of a sudden the SVGs break out of their boundaries or shrink and don’t adhere to the applied styling any more…
I needed to yarn build
again and am running with the unoptimized assets now since I can’t get the icons to behave properly.
What am I missing here? Surely there is some optimization taking place and that’s all swell but either I am doing something wrong with my handling of the SVGs or this is ‘buggy’ in the sense of overwriting my styles / locking down the files…?
Has anyone of you experienced this?
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.231 0h-18.462c-1.529 0-2.769 1.24-2.769 2.769v18.46c0 1.531 1.24 2.771 2.769 2.771h18.463c1.529 0 2.768-1.24 2.768-2.771v-18.46c0-1.529-1.239-2.769-2.769-2.769zm-9.231 7.385c2.549 0 4.616 2.065 4.616 4.615 0 2.549-2.067 4.616-4.616 4.616s-4.615-2.068-4.615-4.616c0-2.55 2.066-4.615 4.615-4.615zm9 12.693c0 .509-.413.922-.924.922h-16.152c-.511 0-.924-.413-.924-.922v-10.078h1.897c-.088.315-.153.64-.2.971-.05.337-.081.679-.081 1.029 0 4.079 3.306 7.385 7.384 7.385s7.384-3.306 7.384-7.385c0-.35-.031-.692-.081-1.028-.047-.331-.112-.656-.2-.971h1.897v10.077zm0-13.98c0 .509-.413.923-.924.923h-2.174c-.511 0-.923-.414-.923-.923v-2.175c0-.51.412-.923.923-.923h2.174c.511 0 .924.413.924.923v2.175z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
CSS
.social .icons a svg {
fill: #4a96cd;
height: 30px;
width: 30px;
}
I have tried changing the hard-coded values inside the SVG (width / height / viewBox) but that doesn’t do the trick, guess the path is tied to the original sizing and thus I’d have to change that too but that’s obviously not the idea behind the whole vector-thing
Thanks for your guidance.