@props([
    'fill' => '#fff',
    'rotate' => '0deg',
    'bg' => 'rgba(255, 255, 255, 0.18)',
    'border' => false,
    'mdHidden' => false,
    'h' => '2rem',
    'w' => '2rem',
    'p' => '0.5rem',
    'class' => ''
])

<div class="rounded-full {{ $mdHidden?'md:hidden':'' }} border-solid border-white {{ $class }} arrow-circle overflow-hidden"
    style="background: {{ $bg }}; padding: {{ $p }}; height: {{ $h }}; width: {{ $w }};   border: solid {{ $border ? '1px' : '0px' }} {{ $fill }}; transform: rotate({{ $rotate }});">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.7 26.68" class="arrow-svg">
        <g id="arrow-svg" data-name="arrow">
            <path fill="{{ $fill }}"
                d="M11.17,26.38s.1,0,.13.05a.27.27,0,0,0,.22.08h.29c.85,0,1.69.09,2.53.15a.63.63,0,0,0,.53-.17c.21-.21.41-.41.63-.61L28.15,14.12l.48-.46c.09-.1.09-.15,0-.26a.52.52,0,0,0-.1-.11l-.67-.68Q22.64,7,17.41,1.35a13.84,13.84,0,0,1-1-1.07A.45.45,0,0,0,16,.07h-.27c-1,0-1.89,0-2.84-.07a.51.51,0,0,0-.42.18q.4.44.81.84c.46.47.91,1,1.36,1.44q3.88,4.19,7.78,8.38c.26.28.51.56.78.83a.53.53,0,0,1,.21.37l-.31,0a13.09,13.09,0,0,0-1.66-.07c-.65,0-1.31,0-2,0-2.16-.06-4.31-.17-6.47-.18-1.39,0-2.78-.07-4.17-.08s-2.63-.09-3.95-.05c-.84,0-1.68,0-2.52-.06-.67,0-1.35-.07-2-.06l-.33,0a5.79,5.79,0,0,1,0,.72c0,.64,0,1.27,0,1.91a.49.49,0,0,0,.05.27.13.13,0,0,0,.1,0c.42,0,.83,0,1.24,0,1.76,0,3.51.14,5.27.15.82,0,1.64,0,2.45.05,1.06,0,2.11,0,3.16,0,1.39.06,2.78.06,4.16.08l2.68.06,2.64.06h1.4a.6.6,0,0,1,.26,0,.19.19,0,0,1-.1.17c-.14.11-.29.21-.43.33-.47.41-.94.84-1.41,1.27-1.39,1.3-2.79,2.59-4.17,3.89s-2.83,2.58-4.18,3.93c-.58.58-1.18,1.14-1.81,1.67l-.19.18" />
        </g>
    </svg>
</div>