fix svg import

Emurgo · May 5, 2022 · 69f3416 · 69f3416
1 parent aced75e
commit 69f3416
Show file tree

Hide file tree

Showing 102 changed files with 249 additions and 249 deletions.
diff --git a/packages/yoroi-extension/app/components/common/Autocomplete.js b/packages/yoroi-extension/app/components/common/Autocomplete.js
@@ -7,9 +7,9 @@ import { useCombobox, useMultipleSelection } from 'downshift';
 import { Input, Box, InputLabel, FormControl, FormHelperText, Chip, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import { slice } from 'lodash';
-import SuccessIcon from '../../assets/images/forms/done.inline.svg';
-import ErrorIcon from '../../assets/images/forms/error.inline.svg';
-import CloseIcon from '../../assets/images/close-chip.inline.svg';
+import { ReactComponent as SuccessIcon}  from '../../assets/images/forms/done.inline.svg';
+import { ReactComponent as ErrorIcon}  from '../../assets/images/forms/error.inline.svg';
+import { ReactComponent as CloseIcon}  from '../../assets/images/close-chip.inline.svg';
 
 type Props = {|
   +options: Array<string>,

diff --git a/packages/yoroi-extension/app/components/common/CheckboxLabel.js b/packages/yoroi-extension/app/components/common/CheckboxLabel.js
@@ -2,8 +2,8 @@
 import type { Node } from 'react';
 import { Checkbox, FormControlLabel, Typography } from '@mui/material';
 
-import OutlineIcon from '../../assets/images/forms/checkbox-outline.inline.svg';
-import CheckedIcon from '../../assets/images/forms/checkbox-checked.inline.svg';
+import { ReactComponent as OutlineIcon}  from '../../assets/images/forms/checkbox-outline.inline.svg';
+import { ReactComponent as CheckedIcon}  from '../../assets/images/forms/checkbox-checked.inline.svg';
 import { Box } from '@mui/system';
 import ReactMarkdown from 'react-markdown';
 

diff --git a/packages/yoroi-extension/app/components/common/Select.js b/packages/yoroi-extension/app/components/common/Select.js
@@ -1,7 +1,7 @@
 // @flow
 import type { Node } from 'react';
 import { FormControl, FormHelperText, InputLabel, Select as SelectBase } from '@mui/material';
-import ArrowIcon from '../../assets/images/forms/arrow-dropdown.inline.svg';
+import { ReactComponent as ArrowIcon}  from '../../assets/images/forms/arrow-dropdown.inline.svg';
 
 type Props = {|
   label: string,

diff --git a/packages/yoroi-extension/app/components/common/TextField.js b/packages/yoroi-extension/app/components/common/TextField.js
@@ -2,10 +2,10 @@
 // @flow
 import type { ElementRef, Node } from 'react';
 import { IconButton, InputAdornment, TextField as TextFieldBase, useTheme } from '@mui/material';
-import ErrorIcon from '../../assets/images/forms/error.inline.svg';
-import DoneIcon from '../../assets/images/forms/done.inline.svg';
-import EyeIcon from '../../assets/images/forms/password-eye-close.inline.svg';
-import CloseEyeIcon from '../../assets/images/forms/password-eye.inline.svg';
+import { ReactComponent as ErrorIcon}  from '../../assets/images/forms/error.inline.svg';
+import { ReactComponent as DoneIcon}  from '../../assets/images/forms/done.inline.svg';
+import { ReactComponent as EyeIcon}  from '../../assets/images/forms/password-eye-close.inline.svg';
+import { ReactComponent as CloseEyeIcon}  from '../../assets/images/forms/password-eye.inline.svg';
 import React from 'react';
 
 type Props = {|

diff --git a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js
@@ -7,8 +7,8 @@ import type { MultiToken, TokenLookupKey } from '../../../api/common/lib/MultiTo
 import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables';
 import { getTokenName } from '../../../stores/stateless/tokenHelpers';
 import { hiddenAmount } from '../../../utils/strings';
-import DeleteIcon from '../../../assets/images/dapp-connector/delete.inline.svg';
-import NoDappImage from '../../../assets/images/dapp-connector/no-dapp.inline.svg';
+import { ReactComponent as DeleteIcon}  from '../../../assets/images/dapp-connector/delete.inline.svg';
+import { ReactComponent as NoDappImage}  from '../../../assets/images/dapp-connector/no-dapp.inline.svg';
 import WalletType from '../../widgets/WalletType';
 import NavPlate from '../../topbar/NavPlate'
 import type { ConceptualWalletSettingsCache } from '../../../stores/toplevel/WalletSettingsStore';

diff --git a/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js b/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js
@@ -6,7 +6,7 @@ import type { Node } from 'react';
 import { classicTheme } from '../../../styles/themes/classic-theme'
 import {  modernTheme } from '../../../styles/themes/modern-theme'
 import classNames from 'classnames';
-import ArrowDown from '../../../assets/images/down-arrow.inline.svg';
+import { ReactComponent as ArrowDown}  from '../../../assets/images/down-arrow.inline.svg';
 import { getMainYoroiPalette, formatPalette } from '../../../styles/globalStyles';
 import type { DesignToken } from '../../../styles/globalStyles'
 

diff --git a/packages/yoroi-extension/app/components/loading/Maintenance.js b/packages/yoroi-extension/app/components/loading/Maintenance.js
@@ -3,7 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, } from 'react-intl';
-import ExternalLinkSVG from '../../assets/images/link-external.inline.svg';
+import { ReactComponent as ExternalLinkSVG}  from '../../assets/images/link-external.inline.svg';
 import styles from './Maintenance.scss';
 import globalMessages from '../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';

diff --git a/packages/yoroi-extension/app/components/notice-board/NoNotice.js b/packages/yoroi-extension/app/components/notice-board/NoNotice.js
@@ -4,8 +4,8 @@ import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { intlShape, defineMessages, FormattedHTMLMessage } from 'react-intl';
 
-import NoNoticeClassicSvg from '../../assets/images/transaction/no-transactions-yet.classic.inline.svg';
-import NoNoticeModernSvg from '../../assets/images/transaction/no-transactions-yet.modern.inline.svg';
+import { ReactComponent as NoNoticeClassicSvg}  from '../../assets/images/transaction/no-transactions-yet.classic.inline.svg';
+import { ReactComponent as NoNoticeModernSvg}  from '../../assets/images/transaction/no-transactions-yet.modern.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 import styles from './NoNotice.scss';

diff --git a/packages/yoroi-extension/app/components/notice-board/NoticeBlock.js b/packages/yoroi-extension/app/components/notice-board/NoticeBlock.js
@@ -6,14 +6,14 @@ import { observer } from 'mobx-react';
 import moment from 'moment';
 
 import Notice, { NoticeKind } from '../../domain/Notice';
-import DelegatedIcon from '../../assets/images/notice-board/delegated.inline.svg';
-import UndelegatedIcon from '../../assets/images/notice-board/undelegated.inline.svg';
-import RedelegatedIcon from '../../assets/images/notice-board/redelegated.inline.svg';
-import FeeChangedIcon from '../../assets/images/notice-board/fee-changed.inline.svg';
-import CostChangedIcon from '../../assets/images/notice-board/cost-changed.inline.svg';
-import RewardRecievedIcon from '../../assets/images/notice-board/reward-received.inline.svg';
-import PoolToRetireIcon from '../../assets/images/notice-board/retired.inline.svg';
-import NoRewardForUndelegationIcon from '../../assets/images/notice-board/reward-not-received.inline.svg';
+import { ReactComponent as DelegatedIcon}  from '../../assets/images/notice-board/delegated.inline.svg';
+import { ReactComponent as UndelegatedIcon}  from '../../assets/images/notice-board/undelegated.inline.svg';
+import { ReactComponent as RedelegatedIcon}  from '../../assets/images/notice-board/redelegated.inline.svg';
+import { ReactComponent as FeeChangedIcon}  from '../../assets/images/notice-board/fee-changed.inline.svg';
+import { ReactComponent as CostChangedIcon}  from '../../assets/images/notice-board/cost-changed.inline.svg';
+import { ReactComponent as RewardRecievedIcon}  from '../../assets/images/notice-board/reward-received.inline.svg';
+import { ReactComponent as PoolToRetireIcon}  from '../../assets/images/notice-board/retired.inline.svg';
+import { ReactComponent as NoRewardForUndelegationIcon}  from '../../assets/images/notice-board/reward-not-received.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 import styles from './NoticeBlock.scss';

diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js
@@ -5,8 +5,8 @@ import { intlShape, defineMessages } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import styles from './ComplexityLevelForm.scss';
 import classnames  from 'classnames';
-import BeginnerLevel from '../../../assets/images/complexity-level/beginner-level.inline.svg';
-import AdvancedLevel from '../../../assets/images/complexity-level/advanced-level.inline.svg';
+import { ReactComponent as BeginnerLevel}  from '../../../assets/images/complexity-level/beginner-level.inline.svg';
+import { ReactComponent as AdvancedLevel}  from '../../../assets/images/complexity-level/advanced-level.inline.svg';
 import LocalizableError from '../../../i18n/LocalizableError';
 import { LoadingButton } from '@mui/lab';
 import { ComplexityLevels } from '../../../types/complexityLevelType';

diff --git a/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.js b/packages/yoroi-extension/app/components/profile/language-selection/IntroBanner.js
@@ -4,8 +4,8 @@ import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import styles from './IntroBanner.scss';
 import { intlShape, } from 'react-intl';
-import NightlyLogo from '../../../assets/images/yoroi-logo-nightly.inline.svg';
-import YoroiLogo from '../../../assets/images/yoroi-logo-blue.inline.svg';
+import { ReactComponent as NightlyLogo}  from '../../../assets/images/yoroi-logo-nightly.inline.svg';
+import { ReactComponent as YoroiLogo}  from '../../../assets/images/yoroi-logo-blue.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 type Props = {|

diff --git a/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js b/packages/yoroi-extension/app/components/profile/nightly/NightlyForm.js
@@ -7,7 +7,7 @@ import CheckboxLabel from '../../common/CheckboxLabel';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import styles from './NightlyForm.scss';
 import globalMessages from '../../../i18n/global-messages';
-import NightlyIcon from '../../../assets/images/yoroi-nightly-icon.inline.svg';
+import { ReactComponent as NightlyIcon}  from '../../../assets/images/yoroi-nightly-icon.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 const messages = defineMessages({

diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js b/packages/yoroi-extension/app/components/profile/uri-prompt/UriAccept.js
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
 import { Button } from '@mui/material';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import styles from './UriAccept.scss';
-import UriPrompt from '../../../assets/images/uri/uri-prompt.inline.svg';
+import { ReactComponent as UriPrompt}  from '../../../assets/images/uri/uri-prompt.inline.svg';
 import globalMessages from '../../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 

diff --git a/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js b/packages/yoroi-extension/app/components/profile/uri-prompt/UriPromptForm.js
@@ -5,8 +5,8 @@ import { observer } from 'mobx-react';
 import { Button } from '@mui/material';
 import { defineMessages, intlShape } from 'react-intl';
 import styles from './UriPromptForm.scss';
-import AboutUri from '../../../assets/images/uri/about-url.inline.svg';
-import AboutUriClassic from '../../../assets/images/uri/about-url-classic.inline.svg';
+import { ReactComponent as AboutUri}  from '../../../assets/images/uri/about-url.inline.svg';
+import { ReactComponent as AboutUriClassic}  from '../../../assets/images/uri/about-url-classic.inline.svg';
 import globalMessages from '../../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 

diff --git a/...i-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js b/...i-extension/app/components/settings/categories/general-setting/AboutYoroiSettingsBlock.js
@@ -6,13 +6,13 @@ import styles from './AboutYoroiSettingsBlock.scss';
 import { observer } from 'mobx-react';
 
 import GridFlexContainer from '../../../layout/GridFlexContainer';
-import githubSvg from '../../../../assets/images/social/github.inline.svg';
-import youtubeSvg from '../../../../assets/images/social/youtube.inline.svg';
-import telegramSvg from '../../../../assets/images/social/telegram.inline.svg';
-import twitterSvg from '../../../../assets/images/social/twitter.inline.svg';
-import yoroiSvg from '../../../../assets/images/yoroi-logo-shape-white.inline.svg';
-import facebookSvg from '../../../../assets/images/social/facebook.inline.svg';
-import mediumSvg from '../../../../assets/images/social/medium.inline.svg';
+import { ReactComponent as githubSvg}  from '../../../../assets/images/social/github.inline.svg';
+import { ReactComponent as youtubeSvg}  from '../../../../assets/images/social/youtube.inline.svg';
+import { ReactComponent as telegramSvg}  from '../../../../assets/images/social/telegram.inline.svg';
+import { ReactComponent as twitterSvg}  from '../../../../assets/images/social/twitter.inline.svg';
+import { ReactComponent as yoroiSvg}  from '../../../../assets/images/yoroi-logo-shape-white.inline.svg';
+import { ReactComponent as facebookSvg}  from '../../../../assets/images/social/facebook.inline.svg';
+import { ReactComponent as mediumSvg}  from '../../../../assets/images/social/medium.inline.svg';
 
 import environment from '../../../../environment';
 import LinkButton from '../../../widgets/LinkButton';

diff --git a/packages/yoroi-extension/app/components/topbar/NavBarBack.js b/packages/yoroi-extension/app/components/topbar/NavBarBack.js
@@ -3,7 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import styles from './NavBarBack.scss';
-import BackIcon from '../../assets/images/wallet-nav/back-arrow.inline.svg';
+import { ReactComponent as BackIcon}  from '../../assets/images/wallet-nav/back-arrow.inline.svg';
 
 type Props = {|
   +title: string,

diff --git a/packages/yoroi-extension/app/components/topbar/NavBarRevamp.js b/packages/yoroi-extension/app/components/topbar/NavBarRevamp.js
@@ -2,7 +2,7 @@
 import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
-import NoticeBoardIcon from '../../assets/images/top-bar/notification.inline.svg';
+import { ReactComponent as NoticeBoardIcon}  from '../../assets/images/top-bar/notification.inline.svg';
 import { Box, IconButton } from '@mui/material';
 
 type Props = {|

diff --git a/packages/yoroi-extension/app/components/topbar/NavDropdown.js b/packages/yoroi-extension/app/components/topbar/NavDropdown.js
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import type { Node, ElementRef } from 'react';
 import { observer } from 'mobx-react';
 import styles from './NavDropdown.scss';
-import CaretIcon from '../../assets/images/wallet-nav/caret-down.inline.svg';
+import { ReactComponent as CaretIcon}  from '../../assets/images/wallet-nav/caret-down.inline.svg';
 import NavDropdownContent from './NavDropdownContent';
 
 type Props = {|

diff --git a/packages/yoroi-extension/app/components/topbar/NavDropdownRevamp.js b/packages/yoroi-extension/app/components/topbar/NavDropdownRevamp.js
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import type { Node, ElementRef } from 'react';
 import { observer } from 'mobx-react';
 import styles from './NavDropdownRevamp.scss';
-import ArrowDown from '../../assets/images/my-wallets/arrow_down.inline.svg';
+import { ReactComponent as ArrowDown}  from '../../assets/images/my-wallets/arrow_down.inline.svg';
 
 import NavDropdownContentRevamp from './NavDropdownContentRevamp';
 

diff --git a/packages/yoroi-extension/app/components/topbar/NavPlate.js b/packages/yoroi-extension/app/components/topbar/NavPlate.js
@@ -5,9 +5,9 @@ import { observer } from 'mobx-react';
 import { intlShape } from 'react-intl';
 import styles from './NavPlate.scss';
 import WalletAccountIcon from './WalletAccountIcon';
-import ConceptualIcon from '../../assets/images/wallet-nav/conceptual-wallet.inline.svg';
-import TrezorIcon from '../../assets/images/wallet-nav/trezor-wallet.inline.svg';
-import LedgerIcon from '../../assets/images/wallet-nav/ledger-wallet.inline.svg';
+import { ReactComponent as ConceptualIcon}  from '../../assets/images/wallet-nav/conceptual-wallet.inline.svg';
+import { ReactComponent as TrezorIcon}  from '../../assets/images/wallet-nav/trezor-wallet.inline.svg';
+import { ReactComponent as LedgerIcon}  from '../../assets/images/wallet-nav/ledger-wallet.inline.svg';
 import { Typography, Tooltip } from '@mui/material';
 import { truncateLongName, maxNameLengthBeforeTruncation } from '../../utils/formatters';
 import type { WalletChecksum } from '@emurgo/cip4-js';

diff --git a/packages/yoroi-extension/app/components/topbar/NavWalletDetails.js b/packages/yoroi-extension/app/components/topbar/NavWalletDetails.js
@@ -8,8 +8,8 @@ import { truncateToken } from '../../utils/formatters';
 
 import globalMessages from '../../i18n/global-messages';
 import styles from './NavWalletDetails.scss';
-import IconEyeOpen from '../../assets/images/my-wallets/icon_eye_open.inline.svg';
-import IconEyeClosed from '../../assets/images/my-wallets/icon_eye_closed.inline.svg';
+import { ReactComponent as IconEyeOpen}  from '../../assets/images/my-wallets/icon_eye_open.inline.svg';
+import { ReactComponent as IconEyeClosed}  from '../../assets/images/my-wallets/icon_eye_closed.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import WalletCurrency from '../wallet/my-wallets/WalletCurrency';
 import { hiddenAmount } from '../../utils/strings';

diff --git a/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js b/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js
@@ -7,8 +7,8 @@ import { intlShape } from 'react-intl';
 import { splitAmount, truncateToken } from '../../utils/formatters';
 
 import styles from './NavWalletDetailsRevamp.scss';
-import IconEyeOpen from '../../assets/images/my-wallets/icon_eye_open.inline.svg';
-import IconEyeClosed from '../../assets/images/my-wallets/icon_eye_closed.inline.svg';
+import { ReactComponent as IconEyeOpen}  from '../../assets/images/my-wallets/icon_eye_open.inline.svg';
+import { ReactComponent as IconEyeClosed}  from '../../assets/images/my-wallets/icon_eye_closed.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import { hiddenAmount } from '../../utils/strings';
 import { MultiToken } from '../../api/common/lib/MultiToken';

diff --git a/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.js b/packages/yoroi-extension/app/components/topbar/NoWalletsAccessList.js
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import styles from './NoWalletsAccessList.scss';
-import StarIcon from '../../assets/images/add-wallet/wallet-list/stared.inline.svg';
+import { ReactComponent as StarIcon}  from '../../assets/images/add-wallet/wallet-list/stared.inline.svg';
 
 const messages = defineMessages({
   quickAccess: {

diff --git a/packages/yoroi-extension/app/components/topbar/Sidebar.js b/packages/yoroi-extension/app/components/topbar/Sidebar.js
@@ -7,9 +7,9 @@ import styles from './Sidebar.scss';
 import type { SidebarCategory } from '../../stores/stateless/sidebarCategories';
 import classnames from 'classnames';
 
-import yoroiLogo from '../../assets/images/sidebar/yoroi_logo.inline.svg';
-import yoroiLogoExpanded from '../../assets/images/sidebar/yoroi_logo_expanded.inline.svg';
-import toggleIcon from '../../assets/images/sidebar/open_sidebar.inline.svg';
+import { ReactComponent as yoroiLogo}  from '../../assets/images/sidebar/yoroi_logo.inline.svg';
+import { ReactComponent as yoroiLogoExpanded}  from '../../assets/images/sidebar/yoroi_logo_expanded.inline.svg';
+import { ReactComponent as toggleIcon}  from '../../assets/images/sidebar/open_sidebar.inline.svg';
 
 type Props = {|
   +children?: ?Node,

diff --git a/packages/yoroi-extension/app/components/topbar/SidebarRevamp.js b/packages/yoroi-extension/app/components/topbar/SidebarRevamp.js
@@ -6,7 +6,7 @@ import SideBarCategoryRevamp from './SideBarCategoryRevamp';
 import styles from './SidebarRevamp.scss';
 import type { SidebarCategoryRevamp } from '../../stores/stateless/sidebarCategories';
 
-import yoroiLogo from '../../assets/images/sidebar/yoroi_logo.inline.svg';
+import { ReactComponent as yoroiLogo}  from '../../assets/images/sidebar/yoroi_logo.inline.svg';
 
 type Props = {|
   +children?: ?Node,

diff --git a/packages/yoroi-extension/app/components/topbar/WalletCard.js b/packages/yoroi-extension/app/components/topbar/WalletCard.js
@@ -5,9 +5,9 @@ import { observer } from 'mobx-react';
 import { intlShape, defineMessages } from 'react-intl';
 import styles from './WalletCard.scss';
 import WalletAccountIcon from './WalletAccountIcon';
-import ConceptualIcon from '../../assets/images/wallet-nav/conceptual-wallet.inline.svg';
-import TrezorIcon from '../../assets/images/wallet-nav/trezor-wallet.inline.svg';
-import LedgerIcon from '../../assets/images/wallet-nav/ledger-wallet.inline.svg';
+import { ReactComponent as ConceptualIcon}  from '../../assets/images/wallet-nav/conceptual-wallet.inline.svg';
+import { ReactComponent as TrezorIcon}  from '../../assets/images/wallet-nav/trezor-wallet.inline.svg';
+import { ReactComponent as LedgerIcon}  from '../../assets/images/wallet-nav/ledger-wallet.inline.svg';
 import { MultiToken } from '../../api/common/lib/MultiToken';
 import classnames from 'classnames';
 import { truncateToken, splitAmount } from '../../utils/formatters';
@@ -25,8 +25,8 @@ import { getTokenName } from '../../stores/stateless/tokenHelpers';
 import { hiddenAmount } from '../../utils/strings';
 import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
 import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
-import DragIcon from '../../assets/images/add-wallet/wallet-list/drag.inline.svg';
-import StarIcon from '../../assets/images/add-wallet/wallet-list/star.inline.svg';
+import { ReactComponent as DragIcon}  from '../../assets/images/add-wallet/wallet-list/drag.inline.svg';
+import { ReactComponent as StarIcon}  from '../../assets/images/add-wallet/wallet-list/star.inline.svg';
 import { Draggable } from 'react-beautiful-dnd';
 
 const messages = defineMessages({

diff --git a/packages/yoroi-extension/app/components/topbar/WalletListDialog.js b/packages/yoroi-extension/app/components/topbar/WalletListDialog.js
@@ -8,8 +8,8 @@ import Dialog from '../widgets/Dialog';
 import DialogCloseButton from '../widgets/DialogCloseButton';
 import styles from './WalletListDialog.scss';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-import IconEyeOpen from '../../assets/images/my-wallets/icon_eye_open.inline.svg';
-import IconEyeClosed from '../../assets/images/my-wallets/icon_eye_closed.inline.svg';
+import { ReactComponent as IconEyeOpen}  from '../../assets/images/my-wallets/icon_eye_open.inline.svg';
+import { ReactComponent as IconEyeClosed}  from '../../assets/images/my-wallets/icon_eye_closed.inline.svg';
 import { splitAmount, truncateToken } from '../../utils/formatters';
 import { getTokenName } from '../../stores/stateless/tokenHelpers';
 import { hiddenAmount } from '../../utils/strings';