Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* ArrowIcon - Directional arrow icon
*
* @example
* ```tsx
* <ArrowIcon width={24} height={24} />
* <ArrowIcon rotate180 /> // Points left
* <ArrowIcon className="text-blue-500" />
* ```
*/
export default function ArrowIcon({
rotate180 = false,
width = 24,
height = 24,
className = '',
style,
...props
}: {
rotate180?: boolean;
} & React.SVGProps<SVGSVGElement>) {
return (
<svg
{...props}
width={width}
height={height}
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
style={{
...style,
transform: rotate180 ? 'rotate(180deg)' : style?.transform}}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M14.5918 5.92548C14.9091 5.60817 15.4236 5.60817 15.7409 5.92548L22.2409 12.4255C22.5582 12.7428 22.5582 13.2572 22.2409 13.5745L15.7409 20.0745C15.4236 20.3918 14.9091 20.3918 14.5918 20.0745C14.2745 19.7572 14.2745 19.2428 14.5918 18.9255L19.7048 13.8125H4.33301C3.88428 13.8125 3.52051 13.4487 3.52051 13C3.52051 12.5513 3.88428 12.1875 4.33301 12.1875H19.7048L14.5918 7.07452C14.2745 6.75722 14.2745 6.24278 14.5918 5.92548Z"
fill="currentColor"
/>
</svg>
);
} |