1import { ArrowUpRightIcon, ChevronRightIcon, IconProps, iconSize, theme } from '@expo/styleguide';
2
3import { externalLinkStyles, footerArrowStyle } from './styles';
4
5export const FootnoteArrowIcon = () => (
6  <ChevronRightIcon size={iconSize['2xs']} color={theme.icon.secondary} css={footerArrowStyle} />
7);
8
9export const ExternalLinkIcon = () => (
10  <ArrowUpRightIcon color={theme.icon.secondary} css={externalLinkStyles} />
11);
12
13export const GuideIcon = ({ size = iconSize.md, color = theme.icon.secondary }: IconProps) => (
14  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
15    <path
16      d="M2.66675 12.9999C2.66675 12.5579 2.84234 12.134 3.1549 11.8214C3.46746 11.5088 3.89139 11.3333 4.33341 11.3333H13.3334"
17      stroke={color}
18      strokeWidth="1.4"
19      strokeLinecap="round"
20      strokeLinejoin="round"
21    />
22    <path
23      d="M4.33341 1.33325H13.3334V14.6666H4.33341C3.89139 14.6666 3.46746 14.491 3.1549 14.1784C2.84234 13.8659 2.66675 13.4419 2.66675 12.9999V2.99992C2.66675 2.55789 2.84234 2.13397 3.1549 1.82141C3.46746 1.50885 3.89139 1.33325 4.33341 1.33325V1.33325Z"
24      stroke={color}
25      strokeWidth="1.4"
26      strokeLinecap="round"
27      strokeLinejoin="round"
28    />
29  </svg>
30);
31
32export const ReactIcon = ({ size = iconSize.md, color = theme.icon.secondary }: IconProps) => (
33  <svg viewBox="-11.5 -10.23174 23 20.46348" width={size} height={size}>
34    <circle cx="0" cy="0" r="2.05" fill={color} />
35    <g stroke={color} strokeWidth="1" fill="none">
36      <ellipse rx="11" ry="4.2" />
37      <ellipse rx="11" ry="4.2" transform="rotate(60)" />
38      <ellipse rx="11" ry="4.2" transform="rotate(120)" />
39    </g>
40  </svg>
41);
42