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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 5x 5x 1x 4x | import Svg, { Circle, Path } from "react-native-svg";
import { IconProps } from "@repo/types/icons";
import { colors } from "../themes";
interface ArrowRightCircleIconProps extends IconProps {
/** When true, renders a solid filled circle with a white arrow (v2 style) */
filled?: boolean;
}
export const ArrowRightCircleIcon = ({
width = 60,
height = 60,
color = colors.slate97,
filled = false,
}: ArrowRightCircleIconProps) => {
if (filled) {
return (
<Svg width={width} height={height} viewBox="0 0 60 60" fill="none">
{/* Solid filled circle */}
<Circle cx="30" cy="30" r="30" fill={color} />
{/* White arrow → */}
<Path
d="M20 30H38"
stroke="white"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<Path
d="M31 22.5L38.5 30L31 37.5"
stroke="white"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
);
}
return (
<Svg width={width} height={height} viewBox="0 0 60 60" fill="none">
<Path
d="M30 55C43.8071 55 55 43.8071 55 30C55 16.1929 43.8071 5 30 5C16.1929 5 5 16.1929 5 30C5 43.8071 16.1929 55 30 55Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<Path
d="M21.25 30H36.25"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<Path
d="M31.25 37.5L38.75 30L31.25 22.5"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
);
};
|