In your case you need to adjust the viewBox
for your svg element, that way when you set your svg's height
and width
, your svg scales properly and you get the desired result. Here's your code which I tweaked:
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 1 20 20" stroke="#000000" height="50px" width="50px">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
See it work on codepen here.
You can learn about how viewBox
works at CSS tricks and MDN.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…