fix: replace feather icons with remix icons on swarm button (#414)

* fix: replace feather icons with remix icons on swarm button

* fix: remove feather icons package (#415)

* fix: remove all feather icons and replace with remix icons

* fix: few stray weird icons

src/components/Card.tsx

@@ -1,6 +1,7 @@
 import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { AlertCircle, Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import AlertCircle from 'remixicon-react/ErrorWarningFillIcon'
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'
 
 interface Props {
@@ -60,11 +61,7 @@ export default function Card({ buttonProps, icon, title, subtitle, status }: Pro
       <div className={classes.wrapper}>
         <div className={classes.iconWrapper}>
           {icon}
-          {status === 'ok' ? (
-            <Check size="13" stroke="#09ca6c" />
-          ) : (
-            <AlertCircle size="13" fill="#f44336" stroke="white" />
-          )}
+          {status === 'ok' ? <Check size="13" color="#09ca6c" /> : <AlertCircle size="13" color="#f44336" />}
         </div>
         <Typography variant="h2" style={{ marginBottom: '8px' }}>
           {title}

src/components/CashoutModal.tsx

@@ -7,7 +7,7 @@ import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Zap } from 'react-feather'
+import Zap from 'remixicon-react/FlashlightLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
 

src/components/ClipboardCopy.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import IconButton from '@material-ui/core/IconButton'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Clipboard } from 'react-feather'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { useSnackbar } from 'notistack'
 
 interface Props {

src/components/ExpandableListItem.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
-import { Info } from 'react-feather'
+import Info from 'remixicon-react/InformationLineIcon'
 import ListItem from '@material-ui/core/ListItem'
 
 const useStyles = makeStyles((theme: Theme) =>

src/components/ExpandableListItemInput.tsx

@@ -2,10 +2,14 @@ import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
-import { Edit, Minus, Search, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import Edit from 'remixicon-react/PencilLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
+import type { RemixiconReactIconProps } from 'remixicon-react'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -53,6 +57,7 @@ interface Props {
   expandedOnly?: boolean
   confirmLabel?: string
   confirmLabelDisabled?: boolean
+  confirmIcon?: React.ComponentType<RemixiconReactIconProps>
   loading?: boolean
   onChange?: (value: string) => void
   onConfirm?: (value: string) => void
@@ -67,6 +72,7 @@ export default function ExpandableListItemKey({
   onChange,
   confirmLabel,
   confirmLabelDisabled,
+  confirmIcon,
   expandedOnly,
   helperText,
   placeholder,
@@ -137,7 +143,7 @@ export default function ExpandableListItemKey({
               (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
             }
             loading={loading}
-            iconType={Search}
+            iconType={confirmIcon ?? Check}
             onClick={() => {
               if (onConfirm) onConfirm(inputValue)
             }}

src/components/ExpandableListItemKey.tsx

@@ -3,7 +3,8 @@ import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ReactElement, useState } from 'react'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Eye, Minus } from 'react-feather'
+import Eye from 'remixicon-react/EyeLineIcon'
+import Minus from 'remixicon-react/SubtractLineIcon'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/components/Feedback.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useEffect, useState } from 'react'
 import * as Sentry from '@sentry/react'
 import { Link } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { MessageSquare } from 'react-feather'
+import MessageSquare from 'remixicon-react/Chat4LineIcon'
 
 import config from '../config'
 import SideBarItem from './SideBarItem'

src/components/SideBarStatus.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useContext } from 'react'
 import { useLocation, matchPath } from 'react-router-dom'
-import { ArrowRight } from 'react-feather'
+import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'

src/components/SwarmButton.tsx

@@ -1,9 +1,9 @@
 import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
 import React, { ReactElement } from 'react'
-import { IconProps } from 'react-feather'
+import type { RemixiconReactIconProps } from 'remixicon-react'
 
 export interface SwarmButtonProps extends ButtonProps {
-  iconType: React.ComponentType<IconProps>
+  iconType: React.ComponentType<RemixiconReactIconProps>
   loading?: boolean
   cancel?: boolean
   variant?: 'text' | 'contained' | 'outlined'
@@ -18,7 +18,7 @@ const useStyles = makeStyles(() =>
       color: '#242424',
       '&:hover, &:focus': {
         '& svg': {
-          stroke: '#fff',
+          fill: '#fff',
           transition: '0.1s',
         },
       },

src/components/TroubleshootConnectionCard.tsx

@@ -1,7 +1,7 @@
 import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
-import { Activity } from 'react-feather'
+import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
 import { config } from '../config'
 import { ROUTES } from '../routes'

src/containers/DepositModal.tsx

@@ -1,5 +1,5 @@
 import { ReactElement, useContext } from 'react'
-import { Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
 
 import WithdrawDepositModal from '../components/WithdrawDepositModal'

src/containers/WithdrawModal.tsx

@@ -1,6 +1,6 @@
 import { BigNumber } from 'bignumber.js'
 import { ReactElement, useContext } from 'react'
-import { Upload } from 'react-feather'
+import Upload from 'remixicon-react/UploadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { Context as SettingsContext } from '../providers/Settings'
 

src/pages/account/feeds/AccountFeeds.tsx

@@ -1,6 +1,9 @@
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
-import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import Download from 'remixicon-react/Download2LineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'

src/pages/account/stamps/AccountStamps.tsx

@@ -1,6 +1,6 @@
 import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement, useContext, useEffect } from 'react'
-import { PlusSquare } from 'react-feather'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'

src/pages/account/wallet/AccountWallet.tsx

@@ -1,6 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
-import { Download, Gift, Link } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
+import Link from 'remixicon-react/LinkIcon'
 import { useNavigate } from 'react-router'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'

src/pages/feeds/CreateNewFeed.tsx

@@ -2,7 +2,8 @@ import { Box, Grid, Typography } from '@material-ui/core'
 import { Form, Formik } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate } from 'react-router'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'

src/pages/feeds/DeleteFeedDialog.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Trash, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'

src/pages/feeds/ExportFeedDialog.tsx

@@ -2,7 +2,8 @@ import { Box, createStyles, makeStyles, Typography } from '@material-ui/core'
 import { saveAs } from 'file-saver'
 import { useSnackbar } from 'notistack'
 import { ReactElement } from 'react'
-import { Clipboard, Download } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 import { Code } from '../../components/Code'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'

src/pages/feeds/FeedPasswordDialog.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'

src/pages/feeds/FeedSubpage.tsx

@@ -1,7 +1,7 @@
 import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate, useParams } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'

src/pages/feeds/ImportFeedDialog.tsx

@@ -1,7 +1,8 @@
 import { Box, createStyles, makeStyles, TextareaAutosize, Theme } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import React, { ReactElement, useContext, useRef, useState } from 'react'
-import { Check, Upload } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import Upload from 'remixicon-react/UploadLineIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmDialog } from '../../components/SwarmDialog'

src/pages/feeds/UpdateFeed.tsx

@@ -1,7 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { Bookmark, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
 import { useNavigate, useParams } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'

src/pages/feeds/index.tsx

@@ -1,6 +1,9 @@
 import { Box, Typography } from '@material-ui/core'
 import { ReactElement, useContext, useState } from 'react'
-import { Download, Info, PlusSquare, Trash } from 'react-feather'
+import Download from 'remixicon-react/DownloadLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Info from 'remixicon-react/InformationLineIcon'
+import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableList from '../../components/ExpandableList'
 import ExpandableListItem from '../../components/ExpandableListItem'

src/pages/files/AssetPreview.tsx

@@ -1,7 +1,8 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { Web } from '@material-ui/icons'
 import { ReactElement } from 'react'
-import { File, Folder } from 'react-feather'
+import File from 'remixicon-react/FileLineIcon'
+import Folder from 'remixicon-react/FolderLineIcon'
 import { FitImage } from '../../components/FitImage'
 import { shortenText } from '../../utils'
 import { getHumanReadableFileSize } from '../../utils/file'

src/pages/files/Download.tsx

@@ -3,6 +3,7 @@ import { ManifestJs } from '@ethersphere/manifest-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import Search from 'remixicon-react/SearchLineIcon'
 import ExpandableListItemInput from '../../components/ExpandableListItemInput'
 import { History } from '../../components/History'
 import { Context, defaultUploadOrigin } from '../../providers/File'
@@ -88,6 +89,7 @@ export function Download(): ReactElement {
         helperText={referenceError}
         confirmLabel={'Find'}
         confirmLabelDisabled={Boolean(referenceError) || loading}
+        confirmIcon={Search}
         placeholder="e.g. 31fb0362b1a42536134c86bc58b97ac0244e5c6630beec3e27c2d1cecb38c605"
         expandedOnly
         mapperFn={value => recognizeEnsOrSwarmHash(value)}

src/pages/files/DownloadActionBar.tsx

@@ -1,6 +1,9 @@
 import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Bookmark, Download, Link, X } from 'react-feather'
+import X from 'remixicon-react/CloseLineIcon'
+import Bookmark from 'remixicon-react/BookmarkLineIcon'
+import Download from 'remixicon-react/DownloadLineIcon'
+import Link from 'remixicon-react/LinkIcon'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 

src/pages/files/UploadActionBar.tsx

@@ -1,6 +1,10 @@
 import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { ArrowLeft, Check, Layers, PlusSquare, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
+import ArrowLeft from 'remixicon-react/ArrowLeftLineIcon'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import Layers from 'remixicon-react/StackLineIcon'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'

src/pages/files/UploadArea.tsx

@@ -2,7 +2,9 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core'
 import { DropzoneArea } from 'material-ui-dropzone'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { FilePlus, FolderPlus, PlusCircle } from 'react-feather'
+import PlusCircle from 'remixicon-react/AddCircleLineIcon'
+import FilePlus from 'remixicon-react/FileAddLineIcon'
+import FolderPlus from 'remixicon-react/FolderAddLineIcon'
 import { useNavigate } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import { SwarmButton } from '../../components/SwarmButton'

src/pages/gift-code/index.tsx

@@ -1,7 +1,8 @@
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { Check, X } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import { useNavigate } from 'react-router'
 import { Wallet } from 'ethers'
 import ExpandableListItem from '../../components/ExpandableListItem'

src/pages/info/index.tsx

@@ -1,6 +1,11 @@
 import { ReactElement, useContext } from 'react'
 import { Button } from '@material-ui/core'
-import { Globe, Briefcase, Search, Settings, ArrowUp, RefreshCcw } from 'react-feather'
+import Wallet from 'remixicon-react/Wallet3LineIcon'
+import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon'
+import Search from 'remixicon-react/SearchLineIcon'
+import Globe from 'remixicon-react/GlobalLineIcon'
+import Settings from 'remixicon-react/Settings2LineIcon'
+import Upload from 'remixicon-react/UploadLineIcon'
 
 import { Context as BeeContext } from '../../providers/Bee'
 import Card from '../../components/Card'
@@ -46,11 +51,11 @@ export default function Status(): ReactElement {
         {nodeInfo?.beeMode && ['light', 'full', 'dev'].includes(nodeInfo.beeMode) ? (
           <Card
             buttonProps={{
-              iconType: Briefcase,
-              children: 'Manage your wallet.',
+              iconType: Wallet,
+              children: 'Manage your wallet',
               onClick: () => navigate(ROUTES.ACCOUNT_WALLET),
             }}
-            icon={<Briefcase />}
+            icon={<Wallet />}
             title={`${balance?.bzz.toSignificantDigits(4)} xBZZ | ${balance?.dai.toSignificantDigits(4)} xDAI`}
             subtitle="Current wallet balance."
             status="ok"
@@ -58,11 +63,11 @@ export default function Status(): ReactElement {
         ) : (
           <Card
             buttonProps={{
-              iconType: Settings,
+              iconType: Wallet,
               children: 'Setup wallet',
               onClick: () => navigate(ROUTES.WALLET),
             }}
-            icon={<ArrowUp />}
+            icon={<Upload />}
             title="Your wallet is not setup."
             subtitle="To share content on Swarm, please setup your wallet."
             status="error"
@@ -75,11 +80,11 @@ export default function Status(): ReactElement {
             chequebookBalance?.availableBalance.toBigNumber.isGreaterThan(0) ? (
               <Card
                 buttonProps={{
-                  iconType: RefreshCcw,
+                  iconType: ExchangeFunds,
                   children: 'View chequebook',
                   onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
                 }}
-                icon={<RefreshCcw />}
+                icon={<ExchangeFunds />}
                 title={`${chequebookBalance?.availableBalance.toSignificantDigits(4)} xBZZ`}
                 subtitle="Current chequebook balance."
                 status="ok"
@@ -87,11 +92,11 @@ export default function Status(): ReactElement {
             ) : (
               <Card
                 buttonProps={{
-                  iconType: RefreshCcw,
+                  iconType: ExchangeFunds,
                   children: 'View chequebook',
                   onClick: () => navigate(ROUTES.ACCOUNT_CHEQUEBOOK),
                 }}
-                icon={<RefreshCcw />}
+                icon={<ExchangeFunds />}
                 title={
                   chequebookBalance?.availableBalance
                     ? `${chequebookBalance.availableBalance.toFixedDecimal(4)} xBZZ`

src/pages/rpc/Confirmation.tsx

@@ -1,6 +1,9 @@
 import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Battery, BatteryCharging, Check, Gift } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import BankCard from 'remixicon-react/BankCard2LineIcon'
+import MoneyDollarCircle from 'remixicon-react/MoneyDollarCircleLineIcon'
+import Gift from 'remixicon-react/GiftLineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { HistoryHeader } from '../../components/HistoryHeader'
@@ -45,10 +48,10 @@ export default function Confirmation(): ReactElement {
           </Typography>
         </Box>
         <ExpandableListItemActions>
-          <SwarmButton iconType={Battery} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
+          <SwarmButton iconType={BankCard} onClick={() => navigate(ROUTES.TOP_UP_BANK_CARD)}>
             Get started with bank card
           </SwarmButton>
-          <SwarmButton iconType={BatteryCharging} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
+          <SwarmButton iconType={MoneyDollarCircle} onClick={() => navigate(ROUTES.TOP_UP_CRYPTO)}>
             Use DAI
           </SwarmButton>
           <SwarmButton iconType={Gift} onClick={() => navigate(ROUTES.TOP_UP_GIFT_CODE)}>

src/pages/rpc/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import { useNavigate } from 'react-router'
 import { providers } from 'ethers'
 import { HistoryHeader } from '../../components/HistoryHeader'

src/pages/stamps/PostageStampCreation.tsx

@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js'
 import { Form, Formik, FormikHelpers } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext } from 'react'
-import { Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { Context as BeeContext } from '../../providers/Bee'

src/pages/stamps/index.tsx

@@ -1,7 +1,7 @@
 import { CircularProgress, Container } from '@material-ui/core'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { ReactElement, useContext, useEffect } from 'react'
-import { PlusSquare } from 'react-feather'
+import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import { useNavigate } from 'react-router'
 import { SwarmButton } from '../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'

src/pages/top-up/GiftCardFund.tsx

@@ -1,7 +1,8 @@
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
-import { ArrowDown, Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
+import ArrowDown from 'remixicon-react/ArrowDownLineIcon'
 import { useNavigate, useParams } from 'react-router'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -2,7 +2,7 @@ import { Box, Typography } from '@material-ui/core'
 import { Wallet } from 'ethers'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { ArrowRight } from 'react-feather'
+import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
 import { useNavigate } from 'react-router'
 import { Context as TopUpContext } from '../../providers/TopUp'
 import { HistoryHeader } from '../../components/HistoryHeader'

src/pages/top-up/Swap.tsx

@@ -1,7 +1,8 @@
 import { Box, Typography } from '@material-ui/core'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
-import { ArrowDown, Check } from 'react-feather'
+import ArrowDown from 'remixicon-react/ArrowDownCircleLineIcon'
+import Check from 'remixicon-react/CheckLineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'

src/pages/top-up/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
-import { Check } from 'react-feather'
+import Check from 'remixicon-react/CheckLineIcon'
 import { useNavigate } from 'react-router'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'