fix: Update icons to use Artsy Icons

package.json

@@ -33,6 +33,7 @@
     "FOR DEPS NEEDED FOR THE STORYBOOK APP, ADD THEM AS DEV DEPS BELOW."
   ],
   "dependencies": {
+    "@artsy/icons": "3.25.7--canary.58.742.0",
     "@artsy/palette-tokens": "^6.3.0",
     "@shopify/flash-list": "1.7.1",
     "@styled-system/core": "^5.1.2",

src/elements/BackButton/BackButton.tsx

@@ -1,6 +1,6 @@
+import { ChevronLeftIcon, CloseIcon } from "@artsy/icons/native"
 import { TouchableOpacity, TouchableOpacityProps, ViewProps } from "react-native"
 import { DEFAULT_HIT_SLOP } from "../../constants"
-import { ChevronIcon, CloseIcon } from "../../svgs"
 import { Color } from "../../types"
 import { Flex } from "../Flex"
 
@@ -33,7 +33,7 @@ export const BackButton: React.FC<BackButtonProps> = ({
       {showX ? (
         <CloseIcon fill={color} width={iconSize} height={iconSize} />
       ) : (
-        <ChevronIcon direction="left" fill={color} height={iconSize} width={iconSize} />
+        <ChevronLeftIcon fill={color} height={iconSize} width={iconSize} />
       )}
     </TouchableOpacity>
   )
@@ -63,7 +63,7 @@ export const BackButtonWithBackground: React.FC<BackButtonProps> = ({
         {showX ? (
           <CloseIcon fill={color} width={26} height={26} />
         ) : (
-          <ChevronIcon fill={color} direction="left" />
+          <ChevronLeftIcon fill={color} />
         )}
       </Flex>
     </TouchableOpacity>

src/elements/Banner/Banner.tsx

@@ -1,8 +1,8 @@
+import { CloseIcon } from "@artsy/icons/native"
 import { useRef, useState } from "react"
 import { Animated, Easing, TouchableOpacity } from "react-native"
 import { FlexProps } from "styled-system"
 import { DEFAULT_HIT_SLOP } from "../../constants"
-import { CloseIcon } from "../../svgs"
 import { Flex } from "../Flex"
 import { Text } from "../Text"
 

src/elements/Button/FollowButton.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon } from "../../svgs/CheckIcon"
+import { CheckmarkIcon } from "@artsy/icons/native"
 import { formatLargeNumber } from "../../utils/formatLargeNumber"
 import { Button, ButtonProps } from "../Button"
 import { Text } from "../Text"
@@ -24,7 +24,7 @@ export const FollowButton = ({
       variant={isFollowed ? "outline" : "outlineGray"}
       size="small"
       longestText={longestText ? longestText : "Following"}
-      icon={isFollowed && !loading && <CheckIcon fill="black60" width="16px" height="16px" />}
+      icon={isFollowed && !loading && <CheckmarkIcon fill="black60" width="16px" height="16px" />}
       loading={loading}
       {...restProps}
     >

src/elements/ButtonNew/Button.stories.tsx

@@ -1,3 +1,4 @@
+import { BellStrokeIcon } from "@artsy/icons/native"
 import { capitalize } from "lodash"
 import { useState } from "react"
 import { Button as RNButton } from "react-native"
@@ -6,7 +7,7 @@ import { CTAButton } from "./CTAButton"
 import { FollowButton } from "./FollowButton"
 import { LinkButton } from "./LinkButton"
 import { DataList, List } from "../../storybook/helpers"
-import { BellIcon, LinkIcon } from "../../svgs"
+import { LinkIcon } from "../../svgs"
 import { Wrap } from "../../utils/Wrap"
 import { NoUndefined } from "../../utils/types"
 import { Box } from "../Box"
@@ -179,7 +180,7 @@ export const Miscellaneous = () => (
     <Button
       variant="fillDark"
       size="small"
-      icon={<BellIcon fill="white100" width="16px" height="16px" />}
+      icon={<BellStrokeIcon fill="white100" width="16px" height="16px" />}
     >
       Create Alert
     </Button>

src/elements/ButtonNew/FollowButton.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon } from "../../svgs/CheckIcon"
+import { CheckmarkIcon } from "@artsy/icons/native"
 import { formatLargeNumber } from "../../utils/formatLargeNumber"
 import { Button, ButtonProps } from "../Button"
 import { Text } from "../Text"
@@ -24,7 +24,7 @@ export const FollowButton = ({
       variant={isFollowed ? "outline" : "outlineGray"}
       size="small"
       longestText={longestText ? longestText : "Following"}
-      icon={isFollowed && !loading && <CheckIcon fill="black60" width="16px" height="16px" />}
+      icon={isFollowed && !loading && <CheckmarkIcon fill="black60" width="16px" height="16px" />}
       loading={loading}
       {...restProps}
     >

src/elements/Checkbox/Check.tsx

@@ -1,6 +1,6 @@
+import { CheckmarkIcon } from "@artsy/icons/native"
 import { themeGet } from "@styled-system/theme-get"
 import styled, { css } from "styled-components/native"
-import { CheckIcon } from "../../svgs/CheckIcon"
 import { Box } from "../Box"
 
 export const CHECK_SIZE = 22
@@ -58,7 +58,7 @@ export const Check: React.FC<CheckProps> = ({ disabled, selected, testID, ...res
       accessibilityRole="checkbox"
       testID={testID}
     >
-      {!!selected && <CheckIcon fill="white100" />}
+      {!!selected && <CheckmarkIcon fill="white100" />}
     </Container>
   )
 }

src/elements/CollapsibleMenuItem/CollapsibleMenuItem.tsx

@@ -1,6 +1,6 @@
+import { CheckmarkStrokeIcon, ChevronDownIcon, ChevronUpIcon } from "@artsy/icons/native"
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"
 import { LayoutAnimation, View } from "react-native"
-import { CheckCircleIcon, ChevronIcon } from "../../svgs"
 import { Collapse } from "../Collapse"
 import { Flex } from "../Flex"
 import { Text } from "../Text"
@@ -91,17 +91,18 @@ export const CollapsibleMenuItem = forwardRef<
             </Text>
             <Flex flexDirection="row" alignItems="center">
               {!!isCompleted && (
-                <CheckCircleIcon
+                <CheckmarkStrokeIcon
                   fill="green100"
                   height={24}
                   width={24}
                   style={{ marginRight: 5 }}
                 />
               )}
-              <ChevronIcon
-                direction={isOpen ? "up" : "down"}
-                fill={disabled ? "black30" : "black60"}
-              />
+              {isOpen ? (
+                <ChevronUpIcon fill={disabled ? "black30" : "black60"} />
+              ) : (
+                <ChevronDownIcon fill={disabled ? "black30" : "black60"} />
+              )}
             </Flex>
           </Flex>
         </Touchable>

src/elements/EntityHeader/EntityHeader.tsx

@@ -1,6 +1,6 @@
+import { LockIcon } from "@artsy/icons/native"
 import { isValidElement, useMemo } from "react"
 import { Text as RNText } from "react-native"
-import { LockIcon } from "../../svgs"
 import { bullet } from "../../utils/text"
 import { Avatar, AvatarSize } from "../Avatar"
 import { Flex, FlexProps } from "../Flex"

src/elements/Header/ArtsyLogoHeader.tsx

@@ -1,5 +1,5 @@
+import { ArtsyLogoIcon } from "@artsy/icons/native"
 import { StyleSheet } from "react-native"
-import { ArtsyLogoBlackIcon } from "../../svgs"
 import { Box } from "../Box"
 import { Flex } from "../Flex"
 import { Spacer } from "../Spacer"
@@ -11,7 +11,7 @@ export const ArtsyLogoHeader = ({ shadow = false }: Props) => (
   <>
     <Box mt={2} mb={1} style={shadow ? styles.boxShadowStyle : {}}>
       <Flex alignItems="center">
-        <ArtsyLogoBlackIcon scale={0.75} />
+        <ArtsyLogoIcon scale={0.75} />
       </Flex>
       <Spacer x={1} />
     </Box>

src/elements/Input/Input.tsx

@@ -1,5 +1,6 @@
 import { EventEmitter } from "events"
 
+import { HideIcon, ShowIcon } from "@artsy/icons/native"
 import { THEME } from "@artsy/palette-tokens"
 import themeGet from "@styled-system/theme-get"
 import isArray from "lodash/isArray"
@@ -34,7 +35,7 @@ import {
   getInputVariants,
 } from "./helpers"
 import { maskValue, unmaskText } from "./maskValue"
-import { EyeClosedIcon, EyeOpenedIcon, TriangleDown, XCircleIcon } from "../../svgs"
+import { TriangleDown, XCircleIcon } from "../../svgs"
 import { useTheme } from "../../utils/hooks"
 import { useMeasure } from "../../utils/hooks/useMeasure"
 import { Flex } from "../Flex"
@@ -529,7 +530,7 @@ export const Input = forwardRef<InputRef, InputProps>(
               accessibilityLabel={showPassword ? "hide password button" : "show password button"}
               hitSlop={{ bottom: 40, right: 40, left: 0, top: 40 }}
             >
-              {!showPassword ? <EyeClosedIcon fill="black30" /> : <EyeOpenedIcon fill="black60" />}
+              {!showPassword ? <HideIcon fill="black30" /> : <ShowIcon fill="black60" />}
             </Touchable>
           </Flex>
         )

src/elements/LegacyTabs/StepTabs.tsx

@@ -1,7 +1,7 @@
+import { CheckmarkIcon, ChevronRightIcon } from "@artsy/icons/native"
 import { useState } from "react"
 import { TouchableOpacity, LayoutRectangle } from "react-native"
 import { TabBarContainer } from "./TabBarContainer"
-import { CheckIcon, ChevronIcon } from "../../svgs"
 import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions"
 import { Box } from "../Box"
 import { Tab, TabsProps } from "../LegacyTabs"
@@ -48,9 +48,9 @@ export const StepTabs: React.FC<TabsProps> = ({ onTabPress, activeTab, tabs }) =
                     // noop
                   }}
                 />
-                {!!completed && <CheckIcon fill="green100" height={15} width={15} />}
+                {!!completed && <CheckmarkIcon fill="green100" height={15} width={15} />}
               </Box>
-              <ChevronIcon fill="black60" height={10} width={10} />
+              <ChevronRightIcon fill="black60" height={10} width={10} />
             </Box>
           </TouchableOpacity>
         )

src/elements/MenuItem/MenuItem.tsx

@@ -1,4 +1,4 @@
-import { ChevronIcon } from "../../svgs"
+import { ChevronRightIcon } from "@artsy/icons/native"
 import { useColor } from "../../utils/hooks"
 import { Flex } from "../Flex"
 import { Text } from "../Text"
@@ -20,9 +20,10 @@ export const MenuItem = ({
   value,
   onPress,
   disabled = false,
-  chevron = <ChevronIcon direction="right" fill="black60" />,
+  chevron = <ChevronRightIcon fill="black60" />,
 }: MenuItemProps) => {
   const color = useColor()
+
   return (
     <Touchable onPress={onPress} underlayColor={color("black5")} disabled={disabled}>
       <Flex

src/elements/Message/Message.stories.tsx

@@ -1,9 +1,9 @@
+import { InfoIcon } from "@artsy/icons/native"
 import { storiesOf } from "@storybook/react-native"
 import { Text } from "react-native"
 import { Message } from "./Message"
 import { withTheme } from "../../storybook/decorators"
 import { List } from "../../storybook/helpers"
-import { InfoCircleIcon } from "../../svgs"
 import { Button } from "../Button"
 
 storiesOf("Message", module)
@@ -53,7 +53,7 @@ storiesOf("Message", module)
         showCloseButton
         title="Default position"
         text="Text"
-        IconComponent={() => <InfoCircleIcon />}
+        IconComponent={() => <InfoIcon />}
       />
       <Message
         iconPosition="right"

src/elements/Message/Message.tsx

@@ -1,7 +1,7 @@
+import { CloseIcon } from "@artsy/icons/native"
 import { Color } from "@artsy/palette-tokens/dist/themes/v3"
 import { useRef, useState } from "react"
 import { Animated, Easing, TouchableOpacity } from "react-native"
-import { CloseIcon } from "../../svgs"
 import { useColor } from "../../utils/hooks/useColor"
 import { Flex, FlexProps } from "../Flex"
 import { Text, TextProps } from "../Text"

src/elements/Pill/Pill.stories.tsx

@@ -1,8 +1,8 @@
+import { GraphIcon } from "@artsy/icons/native"
 import { storiesOf } from "@storybook/react-native"
 import { useState } from "react"
 import { Pill } from "./Pill"
 import { List } from "../../storybook/helpers"
-import { GraphIcon } from "../../svgs"
 import { Flex } from "../Flex"
 
 export default {

src/elements/Pill/Pill.tsx

@@ -1,9 +1,9 @@
+import { CloseIcon } from "@artsy/icons/native"
 import { Color } from "@artsy/palette-tokens"
 import themeGet from "@styled-system/theme-get"
 import { MotiPressable, MotiPressableProps } from "moti/interactions"
-import { useMemo } from "react"
+import React, { useMemo } from "react"
 import styled, { FlattenInterpolation, css } from "styled-components"
-import { CloseIcon } from "../../svgs"
 import { IconProps } from "../../svgs/Icon"
 import { Flex, FlexProps } from "../Flex"
 import { Image } from "../Image"
@@ -25,7 +25,7 @@ export type PillVariant = (typeof PILL_VARIANT_NAMES)[number]
 export type PillProps = (FlexProps & {
   selected?: boolean
   disabled?: boolean
-  Icon?: React.FC<IconProps>
+  Icon?: React.FC<IconProps | any>
   onPress?: MotiPressableProps["onPress"]
 }) &
   (
@@ -158,7 +158,7 @@ const PILL_VARIANTS: Record<PillVariant, Record<PillState, FlattenInterpolation<
       border-color: ${themeGet("colors.black5")};
       border-radius: 25px;
       height: 50px;
-      padding: 0 ${themeGet("space.1")}};
+      padding: 0 ${themeGet("space.1")};
     `,
     selected: css`
       border-color: ${themeGet("colors.blue100")};

src/elements/Popover/Popover.tsx

@@ -1,8 +1,8 @@
+import { CloseIcon } from "@artsy/icons/native"
 import { Color } from "@artsy/palette-tokens"
 import { Platform, StatusBar, ViewStyle } from "react-native"
 import RNPopover from "react-native-popover-view"
 import { Easing } from "react-native-reanimated"
-import { CloseIcon } from "../../svgs"
 import { useColor } from "../../utils/hooks"
 import { Flex } from "../Flex"
 import { Touchable } from "../Touchable"

src/elements/Screen/Header.tsx

@@ -1,10 +1,10 @@
+import { ChevronLeftIcon } from "@artsy/icons/native"
 import { MotiView } from "moti"
 import React from "react"
 import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated"
 import { useScreenScrollContext } from "./ScreenScrollContext"
 import { NAVBAR_HEIGHT, ZINDEX } from "./constants"
 import { DEFAULT_HIT_SLOP } from "../../constants"
-import { ArrowLeftIcon } from "../../svgs/ArrowLeftIcon"
 import { Flex, FlexProps } from "../Flex"
 import { Text } from "../Text"
 import { Touchable } from "../Touchable"
@@ -125,7 +125,7 @@ const Left: React.FC<{
     <>
       {leftElements || (
         <Touchable onPress={onBack} underlayColor="transparent" hitSlop={DEFAULT_HIT_SLOP}>
-          <ArrowLeftIcon fill="onBackgroundHigh" />
+          <ChevronLeftIcon fill="onBackgroundHigh" />
         </Touchable>
       )}
     </>

src/elements/SearchInput/RoundSearchInput.tsx

@@ -1,8 +1,7 @@
 import isArray from "lodash/isArray"
 import isString from "lodash/isString"
 import { useCallback, useMemo, useRef, useState } from "react"
-import { Platform, StyleProp, TextInput, TextInputProps, TextStyle } from "react-native"
-import { backgroundColor } from "styled-system"
+import { StyleProp, TextInput, TextInputProps, TextStyle } from "react-native"
 import { DEFAULT_HIT_SLOP } from "../../constants"
 import { ArrowLeftIcon, MagnifyingGlassIcon } from "../../svgs"
 import { useColor, useTheme } from "../../utils/hooks"
@@ -177,6 +176,7 @@ export const RoundSearchInput: React.FC<RoundSearchInputProps> = ({
           {!isFocused ? (
             <MagnifyingGlassIcon fill="black60" width={ICON_SIZE} height={ICON_SIZE} />
           ) : (
+            // FIXME: ArrowLeft doesn't exit in Artsy icons
             <ArrowLeftIcon long fill="black60" width={ICON_SIZE} height={ICON_SIZE} />
           )}
         </Touchable>

src/elements/Touchable/Touchable.stories.tsx

@@ -1,6 +1,6 @@
+import { TrashIcon } from "@artsy/icons/native"
 import { Touchable } from "./Touchable"
 import { List } from "../../storybook/helpers"
-import { TrashIcon } from "../../svgs"
 import { Flex } from "../Flex"
 import { Text } from "../Text"