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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* ArrowRightIcon - Right-pointing arrow with horizontal line
* Commonly used for "read more", "continue", "next step", and forward navigation
*
* @example
* ```tsx
* <ArrowRightIcon /> // Default 18x18
* <ArrowRightIcon width={24} height={24} />
* <ArrowRightIcon className="text-blue-500" />
* ```
*/
export default function ArrowRightIcon({
width = 18,
height = 18,
className = 'fill-current',
...props
}: React.SVGProps<SVGSVGElement>) {
return (
<svg
{...props}
className={className}
width={width}
height={height}
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.1023 4.10225C10.3219 3.88258 10.6781 3.88258 10.8977 4.10225L15.3977 8.60225C15.6174 8.82192 15.6174 9.17808 15.3977 9.39775L10.8977 13.8977C10.6781 14.1174 10.3219 14.1174 10.1023 13.8977C9.88258 13.6781 9.88258 13.3219 10.1023 13.1023L13.642 9.5625H3C2.68934 9.5625 2.4375 9.31066 2.4375 9C2.4375 8.68934 2.68934 8.4375 3 8.4375H13.642L10.1023 4.89775C9.88258 4.67808 9.88258 4.32192 10.1023 4.10225Z"
fill="currentColor"
/>
</svg>
);
}
|