Kevin Powell - CommunityKP-C
Kevin Powell - Community•4y ago•
19 replies
Shayokh

Svg sizing issue...

I am trying to do replicate a design from frontend mentors. There is a "shopping cart" svg they provided that should be in a button with "Add to Cart" text. Now, the problem is that when I put the svg next to the text, the svg appears to be massive and can't be controlled. Please help.

Button without the svg (Looks ok):
<button class="btn"><p class="button-text"><strong>Add to Cart</strong></p></button>

Button with the svg:
<button class="btn"><img src="images/icon-cart.svg" alt="Cart" class="icon">Add to Cart</button>

svg (shopping cart):
<svg width="15" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"/></svg>


Please help. 🥺
issue.png
Screenshot_2022-09-29_185519.png
Was this page helpful?