SVGs in menu getting cut off/cropped incorrectly - svg

Question

After spending hours looking into similar issues I still haven't found a solution that works. I have some SVGs that are rendering fine normally, but when they're placed in the <nav> parts are cut off. I have noticed that the issue seems to occur only when multiple SVG icons are used in the nav. So if, for example, I remove the first <li> item in its entirety the remaining SVGs seem to not have the problem of being cut off.
I've set up a codepen here with the same code below: https://codepen.io/lsg-alex/pen/oNgVLbq
<nav id="site-navigation" class="main-navigation">
<div class="menu-main-container">
<ul id="menu-main">
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 12.1 18.1"
width="12.1"
height="18.1"
>
<defs>
<style>
.cls-1,
.cls-4 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
.cls-4 {
stroke: #58585b;
stroke-linecap: square;
stroke-linejoin: round;
stroke-width: 0.5px;
}
</style>
<clipPath id="clip-path">
<rect class="cls-1" width="12.1" height="18.1"></rect>
</clipPath>
</defs>
<title>icon-archive</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
></path>
<path
class="cls-4"
d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Archive</span></a
>
</li>
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16.24 17.78"
width="16.24"
height="17.78"
>
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
</style>
<clipPath id="clip-path">
<rect class="cls-1" width="16.24" height="17.78"></rect>
</clipPath>
</defs>
<title>icon-topics</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M5.24,10.35,6.23,8a.42.42,0,0,1,.39-.26h3.72a.44.44,0,0,1,.43.43.36.36,0,0,1-.06.2l-1,2.36a.42.42,0,0,1-.39.26H5.61a.44.44,0,0,1-.43-.43.36.36,0,0,1,.06-.2M8,.56,5.63,6.23a.43.43,0,0,1-.39.26H.61a.62.62,0,0,0,0,1.23H4.36a.43.43,0,0,1,.42.43.35.35,0,0,1,0,.2l-1,2.36a.42.42,0,0,1-.4.26H.61a.62.62,0,0,0,0,1.23H2.46a.43.43,0,0,1,.43.43.46.46,0,0,1-.05.2L1.11,16.93a.62.62,0,0,0,1.14.48l2.09-4.94a.42.42,0,0,1,.39-.26H8.44a.43.43,0,0,1,.43.43.46.46,0,0,1,0,.2L7.16,16.77a.62.62,0,0,0,1.15.46l2-4.76a.42.42,0,0,1,.39-.26h4.92a.6.6,0,0,0,.43-.18.61.61,0,0,0-.43-1h-4a.43.43,0,0,1-.42-.43.35.35,0,0,1,.05-.2l1-2.36a.42.42,0,0,1,.4-.26h3a.62.62,0,0,0,0-1.23H13.49a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2l2.11-5A.62.62,0,0,0,14.08.38L11.61,6.23a.42.42,0,0,1-.39.26H7.51a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2L9.18,1A.62.62,0,0,0,8,.56"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Topics</span></a
>
</li>
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16.72 16.14"
width="16.72"
height="16.14"
>
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
</style>
<clipPath id="clip-path" transform="translate(0 0)">
<rect class="cls-1" width="16.72" height="16.14"></rect>
</clipPath>
</defs>
<title>icon-search</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M9.84,11c-2.75-.13-4.75-2.1-4.65-4.57A4.6,4.6,0,0,1,10,2.06a4.58,4.58,0,0,1,4.52,4.63A4.57,4.57,0,0,1,9.84,11m-5.55-.57c-.86.81-3,3-3.86,3.81a1,1,0,0,0-.15,1.5,1.07,1.07,0,0,0,1.6,0c.87-.82,3.05-3.08,3.89-3.89,4.1,2.38,7.81,1,9.71-1.56a6.37,6.37,0,0,0-.8-8.44,7,7,0,0,0-9.06-.47,6.43,6.43,0,0,0-1.33,9"
transform="translate(0 0)"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Search</span></a
>
</li>
</ul>
</div>
</nav>
I tried adjusting the viewBox settings, height/width on the SVGs themselves as well as through CSS, setting overflow to visible, using a .svg inside an tag, etc. but none of these seem to have any impact. When I pull one of the SVGs that's cut off outside of the nav and paste the code above it, for example, it renders properly.
I can't help but feel like there's something obvious here I'm overlooking, and any help would be really appreciated.

Answer 1

This line is your culprit, remove them (or at least this first one since it's the one effecting the ones below it) and voila;
<clipPath id="clip-path">
<rect class="cls-1" width="12.1" height="18.1"></rect>
</clipPath>
Then to keep it clean, remove the references to it in the CSS such as;
clip-path: url(#clip-path);
I'm going to assume these were generated with something and you didn't intend on needing a specified clip-path anyway.
Cheers!