SVG icon alignment changes when converted to reusable compnent - Laravel

Question

I have a simple question. In my blade file, I have a simple SVG icon like that

<span class="indicator__icon">
   <svg width="32" height="32">
      <path d="M23,4c3.9,0,7,3.1,7,7c0,6.3-11.4,15.9-14,16.9C13.4,26.9,2,17.3,2,11c0-3.9,3.1-7,7-7c2.1,0,4.1,1,5.4,2.6l1.6,2l1.6-2 C18.9,5,20.9,4,23,4 M23,2c-2.8,0-5.4,1.3-7,3.4C14.4,3.3,11.8,2,9,2c-5,0-9,4-9,9c0,8,14,19,16,19s16-11,16-19C32,6,28,2,23,2L23,2
 z" />
   </svg>
</span>

But when I convert this SVG icon to the component, the alignment of the icon changes.

<span class="indicator__icon">
   <x-icons.heartEmpty width="32" height="32"/>
</span>

Here is heartEmpty component code

<svg  {{ $attributes }}>
    <path d="M23,4c3.9,0,7,3.1,7,7c0,6.3-11.4,15.9-14,16.9C13.4,26.9,2,17.3,2,11c0-3.9,3.1-7,7-7c2.1,0,4.1,1,5.4,2.6l1.6,2l1.6-2
    C18.9,5,20.9,4,23,4 M23,2c-2.8,0-5.4,1.3-7,3.4C14.4,3.3,11.8,2,9,2c-5,0-9,4-9,9c0,8,14,19,16,19s16-11,16-19C32,6,28,2,23,2L23,2
    z" /> 
</svg>

I want the icon to look like the second picture while using reusable component

With Component usage

Without Component usage