All files / src/components/ui/icons ChevronRightIcon.tsx

30.55% Statements 11/36
100% Branches 0/0
0% Functions 0/1
30.55% Lines 11/36

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 371x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x                                                    
/**
 * ChevronRightIcon - Right-pointing chevron/arrow icon
 * Commonly used for navigation (next, forward), carousels, and pagination
 *
 * @example
 * ```tsx
 * <ChevronRightIcon /> // Default 24x24
 * <ChevronRightIcon width={20} height={20} />
 * <ChevronRightIcon className="text-blue-500" />
 * ```
 */
export default function ChevronRightIcon({
  width = 24,
  height = 24,
  className = 'fill-current',
  ...props
}: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      className={className}
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M8.51192 4.43057C8.82641 4.161 9.29989 4.19743 9.56946 4.51192L15.5695 11.5119C15.8102 11.7928 15.8102 12.2072 15.5695 12.4881L9.56946 19.4881C9.29989 19.8026 8.82641 19.839 8.51192 19.5695C8.19743 19.2999 8.161 18.8264 8.43057 18.5119L14.0122 12L8.43057 5.48811C8.161 5.17361 8.19743 4.70014 8.51192 4.43057Z"
        fill="currentColor"
      />
    </svg>
  );
}