fix(styles): clean up and standardize icons

Implement Icon components throughout the app.

app/components/Activity/Activity.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
+import Search from 'components/Icon/Search'
-import searchIcon from 'icons/search.svg'
+import X from 'components/Icon/X'
-import xIcon from 'icons/x.svg'
 import FaRepeat from 'react-icons/lib/fa/repeat'
 
 import { FormattedMessage, injectIntl } from 'react-intl'
@@ -161,7 +160,7 @@ class Activity extends Component {
                 }}
               >
                 <span className={styles.xIcon}>
-                  <Isvg src={xIcon} />
+                  <X />
                 </span>
               </section>
             </header>
@@ -195,7 +194,7 @@ class Activity extends Component {
                     </span>
                   </li>
                   <li className={styles.activeFilter} onClick={() => updateSearchActive(true)}>
-                    <Isvg src={searchIcon} />
+                    <Search />
                   </li>
                 </ul>
               </section>

app/components/Activity/ActivityModal/ActivityModal.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
+import X from 'components/Icon/X'
-import x from 'icons/x.svg'
 
 import TransactionModal from '../TransactionModal'
 import PaymentModal from '../PaymentModal'
@@ -35,7 +34,7 @@ const ActivityModal = ({
     <div className={styles.container}>
       <div className={styles.closeContainer}>
         <span onClick={() => hideActivityModal()}>
-          <Isvg src={x} />
+          <X />
         </span>
       </div>
       <SpecificModal

app/components/Activity/Invoice/Invoice.js

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { btc } from 'lib/utils'
-
-import Isvg from 'react-inlinesvg'
 import Value from 'components/Value'
-import checkmarkIcon from 'icons/check-circle.svg'
+import CheckCircle from 'components/Icon/CheckCircle'
 
 import { FormattedNumber, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
@@ -25,7 +23,7 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
             : intl.formatMessage({ ...messages.type_unpaid })
         }
       >
-        <Isvg src={checkmarkIcon} />
+        <CheckCircle />
       </section>
     </div>
 

app/components/Activity/Payment/Payment.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
+import Zap from 'components/Icon/Zap'
-import zap from 'icons/zap.svg'
 
 import { btc } from 'lib/utils'
 import Value from 'components/Value'
@@ -37,7 +36,7 @@ const Payment = ({
     >
       <div className={styles.activityTypeIcon}>
         <section className="hint--bottom" data-hint={intl.formatMessage({ ...messages.type })}>
-          <Isvg src={zap} />
+          <Zap />
         </section>
       </div>
 

app/components/Activity/PaymentModal/PaymentModal.js

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types'
 
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
-import Isvg from 'react-inlinesvg'
+import PaperPlane from 'components/Icon/PaperPlane'
-import paperPlane from 'icons/paper-plane.svg'
+import Zap from 'components/Icon/Zap'
-import zap from 'icons/zap.svg'
 
 import Value from 'components/Value'
 
@@ -30,12 +29,12 @@ const PaymentModal = ({
   <div className={styles.container}>
     <header className={styles.header}>
       <section>
-        <Isvg src={paperPlane} />
+        <PaperPlane />
         <FormattedMessage {...messages.sent} />
       </section>
       <section className={styles.details}>
         <div>
-          <Isvg src={zap} />
+          <Zap />
           <span className={styles.zap}>
             <FormattedMessage {...messages.lightning} />
           </span>

app/components/Activity/Transaction/Transaction.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
+import ChainLink from 'components/Icon/ChainLink'
-import link from 'icons/chain-link.svg'
 
 import { btc } from 'lib/utils'
 import Value from 'components/Value'
@@ -25,7 +24,7 @@ const Transaction = ({
   >
     <div className={styles.activityTypeIcon}>
       <section className="hint--bottom" data-hint={intl.formatMessage({ ...messages.type })}>
-        <Isvg src={link} />
+        <ChainLink />
       </section>
     </div>
 

app/components/Activity/TransactionModal/TransactionModal.js

@@ -1,10 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
-import Isvg from 'react-inlinesvg'
+import PaperPlane from 'components/Icon/PaperPlane'
-import paperPlane from 'icons/paper-plane.svg'
+import Hand from 'components/Icon/Hand'
-import hand from 'icons/hand.svg'
+import ChainLink from 'components/Icon/ChainLink'
-import link from 'icons/chain-link.svg'
 import { blockExplorer } from 'lib/utils'
 
 import Value from 'components/Value'
@@ -32,14 +31,14 @@ const TransactionModal = ({
     <header className={styles.header}>
       {transaction.received ? (
         <section>
-          <Isvg src={hand} />
+          <Hand />
           <span>
             <FormattedMessage {...messages.received} />
           </span>
         </section>
       ) : (
         <section>
-          <Isvg src={paperPlane} />
+          <PaperPlane />
           <span>
             <FormattedMessage {...messages.sent} />
           </span>
@@ -47,7 +46,7 @@ const TransactionModal = ({
       )}
       <section className={styles.details}>
         <div>
-          <Isvg src={link} />
+          <ChainLink />
           <span
             className={styles.link}
             onClick={() => blockExplorer.showTransaction(network, transaction.tx_hash)}

app/components/AnimatedCheckmark/AnimatedCheckmark.js

@@ -1,7 +0,0 @@
-import React from 'react'
-import Isvg from 'react-inlinesvg'
-import checkmarkIcon from 'components/AnimatedCheckmark/checkmark.svg'
-
-const AnimatedCheckmark = () => <Isvg src={checkmarkIcon} />
-
-export default AnimatedCheckmark

app/components/AnimatedCheckmark/checkmark.svg

@@ -1,4 +0,0 @@
-<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-  <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
-  <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
-</svg>

app/components/AnimatedCheckmark/index.js

@@ -1,3 +0,0 @@
-import AnimatedCheckmark from './AnimatedCheckmark'
-
-export default AnimatedCheckmark

app/components/Contacts/AddChannel/AddChannel.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
 
-import x from 'icons/x.svg'
+import X from 'components/Icon/X'
 
 import { FormattedMessage } from 'react-intl'
 import Button from 'components/UI/Button'
@@ -108,7 +107,7 @@ const AddChannel = ({
           // ref={input => input && input.focus()}
         />
         <span onClick={closeContactsForm} className={styles.closeIcon}>
-          <Isvg src={x} />
+          <X />
         </span>
       </header>
 

app/components/Contacts/ChannelForm/ChannelForm.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Isvg from 'react-inlinesvg'
+import X from 'components/Icon/X'
-import x from 'icons/x.svg'
 
 import ConnectManually from '../ConnectManually'
 import SubmitChannelForm from '../SubmitChannelForm'
@@ -24,7 +23,7 @@ const ChannelForm = ({ formType, formProps, closeForm }) => {
     <div className={styles.container}>
       <div className={styles.closeContainer}>
         <span onClick={closeForm}>
-          <Isvg src={x} />
+          <X />
         </span>
       </div>
       <FormComponent {...formProps} />

app/components/Contacts/Network/Network.js

@@ -1,13 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
 import FaExternalLink from 'react-icons/lib/fa/external-link'
 import FaCircle from 'react-icons/lib/fa/circle'
 import FaRepeat from 'react-icons/lib/fa/repeat'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 import { btc, blockExplorer } from 'lib/utils'
-import plus from 'icons/plus.svg'
+import Plus from 'components/Icon/Plus'
-import search from 'icons/search.svg'
+import Search from 'components/Icon/Search'
 
 import Value from 'components/Value'
 
@@ -202,7 +201,7 @@ class Network extends Component {
             data-hint={intl.formatMessage({ ...messages.open_channel })}
           >
             <span className={styles.plusContainer}>
-              <Isvg src={plus} />
+              <Plus />
             </span>
           </section>
         </header>
@@ -373,7 +372,7 @@ class Network extends Component {
         {(loadingChannelPubkeys.length || pending_open_channels.length || channels.length) && (
           <footer className={styles.search}>
             <label htmlFor="search" className={`${styles.label} ${styles.input}`}>
-              <Isvg src={search} />
+              <Search />
             </label>
             <input
               id="search"

app/components/CryptoIcon/CryptoIcon.js

@@ -1,16 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
 
-import skinnyBitcoinIcon from 'icons/skinny-bitcoin.svg'
+import SkinnyBitcoin from 'components/Icon/SkinnyBitcoin'
-import litecoinIcon from 'icons/litecoin.svg'
+import Litecoin from 'components/Icon/Litecoin'
 
 const CryptoIcon = ({ currency, styles }) => {
   switch (currency) {
     case 'btc':
-      return <Isvg style={styles} src={skinnyBitcoinIcon} />
+      return <SkinnyBitcoin style={styles} />
     case 'ltc':
-      return <Isvg style={styles} src={litecoinIcon} />
+      return <Litecoin style={styles} />
     default:
       return <span />
   }

app/components/Form/Form.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Isvg from 'react-inlinesvg'
+import X from 'components/Icon/X'
-import x from 'icons/x.svg'
 
 import Pay from './Pay'
 import Request from './Request'
@@ -24,7 +23,7 @@ const Form = ({ formType, formProps, closeForm }) => {
     <div className={styles.container}>
       <div className={styles.closeContainer}>
         <span onClick={closeForm}>
-          <Isvg src={x} />
+          <X />
         </span>
       </div>
       <FormComponent {...formProps} />

app/components/Form/Pay/Pay.js

@@ -1,9 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import Isvg from 'react-inlinesvg'
+import PaperPlane from 'components/Icon/PaperPlane'
-import paperPlane from 'icons/paper-plane.svg'
+import ChainLink from 'components/Icon/ChainLink'
-import link from 'icons/chain-link.svg'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import { btc } from 'lib/utils'
@@ -96,7 +95,7 @@ class Pay extends Component {
     return (
       <div className={styles.container}>
         <header className={styles.header}>
-          <Isvg src={paperPlane} />
+          <PaperPlane width="2em" height="2em" />
           <h1>
             <FormattedMessage {...messages.title} />
           </h1>
@@ -113,7 +112,7 @@ class Pay extends Component {
               >
                 {isOnchain && (
                   <i>
-                    <Isvg src={link} />
+                    <ChainLink />
                     <span>
                       <FormattedMessage {...messages.onchain_description} />
                     </span>

app/components/Form/Pay/Pay.scss

@@ -18,10 +18,6 @@
     margin-top: 10px;
     letter-spacing: 1.5px;
   }
-
-  svg g {
-    stroke: var(--primaryText);
-  }
 }
 
 .content {

app/components/Form/Request/Request.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Isvg from 'react-inlinesvg'
+import Hand from 'components/Icon/Hand'
-import hand from 'icons/hand.svg'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import { btc } from 'lib/utils'
@@ -41,7 +40,7 @@ const Request = ({
   return (
     <div className={styles.container}>
       <header className={styles.header}>
-        <Isvg src={hand} />
+        <Hand width="3em" height="3em" />
         <h1>
           <FormattedMessage {...messages.title} />
         </h1>

app/components/Form/Request/Request.scss

@@ -18,10 +18,6 @@
     margin-top: 10px;
     letter-spacing: 1.5px;
   }
-
-  svg g {
-    stroke: var(--primaryText);
-  }
 }
 
 .content {

app/components/LoadingBolt/LoadingBolt.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
 import { Transition, animated } from 'react-spring'
-import cloudLightningIcon from 'icons/cloud-lightning.svg'
+import CloudLightning from 'components/Icon/CloudLightning'
 
 import { FormattedMessage } from 'react-intl'
 import messages from './messages'
@@ -19,7 +18,7 @@ class LoadingBolt extends React.PureComponent {
             (springStyles => (
               <animated.div style={springStyles} className={`${styles.container} ${theme}`}>
                 <div className={styles.content}>
-                  <Isvg className={styles.bolt} src={cloudLightningIcon} />
+                  <CloudLightning height="155px" width="150px" />
                   <h1>
                     <FormattedMessage {...messages.loading} />
                   </h1>

app/components/LoadingBolt/LoadingBolt.scss

@@ -25,13 +25,6 @@
   min-height: 250px;
   color: var(--primaryText);
 
-  .bolt svg {
-    height: 155px;
-    width: 150px;
-    stroke-width: 0.5;
-    stroke: var(--primaryText);
-  }
-
   h1 {
     margin-top: 50px;
     font-size: 25px;

app/components/Onboarding/FormContainer/FormContainer.js

@@ -1,14 +1,12 @@
 import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
+import { FormattedMessage } from 'react-intl'
-
 import FaAngleLeft from 'react-icons/lib/fa/angle-left'
 import FaAngleRight from 'react-icons/lib/fa/angle-right'
+import ZapLogo from 'components/Icon/ZapLogo'
+import ZapLogoBlack from 'components/Icon/ZapLogoBlack'
 import Button from 'components/UI/Button'
-import zapLogo from 'icons/zap-logo.svg'
-import { FormattedMessage } from 'react-intl'
-import zapLogoBlack from 'icons/zap-logo-black.svg'
 import messages from './messages'
 import styles from './FormContainer.scss'
 
@@ -17,7 +15,11 @@ const FormContainer = ({ title, description, back, next, children, theme }) => (
     <div className={styles.titleBar} />
     <header className={styles.header}>
       <section>
-        <Isvg src={theme === 'light' ? zapLogoBlack : zapLogo} />
+        {theme === 'light' ? (
+          <ZapLogoBlack width="70px" height="32px" />
+        ) : (
+          <ZapLogo width="70px" height="32px" />
+        )}
       </section>
       <section>
         <div

app/components/Onboarding/FormContainer/FormContainer.scss

@@ -19,9 +19,9 @@
   flex-direction: row;
   justify-content: space-between;
   padding: 40px 40px 20px 40px;
+  color: var(--primaryText);
 
   .help {
-    color: var(--primaryText);
     text-decoration: underline;
     cursor: pointer;
     transition: all 0.25s;

app/components/Onboarding/Syncing/Syncing.js

@@ -2,10 +2,9 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import QRCode from 'qrcode.react'
 import copy from 'copy-to-clipboard'
-import Isvg from 'react-inlinesvg'
+import Copy from 'components/Icon/Copy'
-import zapLogo from 'icons/zap-logo.svg'
+import ZapLogo from 'components/Icon/ZapLogo'
-import zapLogoDark from 'icons/zap-logo-black.svg'
+import ZapLogoBlack from 'components/Icon/ZapLogoBlack'
-import copyIcon from 'icons/copy.svg'
 import { showNotification } from 'lib/utils/notifications'
 import { FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
@@ -92,7 +91,11 @@ class Syncing extends Component {
 
         <div className={styles.content}>
           <header>
-            <Isvg className={styles.bitcoinLogo} src={theme === 'light' ? zapLogoDark : zapLogo} />
+            {theme === 'light' ? (
+              <ZapLogoBlack width="70px" height="32px" />
+            ) : (
+              <ZapLogo width="70px" height="32px" />
+            )}
           </header>
 
           {hasSynced === true && (
@@ -134,7 +137,7 @@ class Syncing extends Component {
                   <section className={styles.textAddress}>
                     <span className={styles.text}>{address}</span>
                     <span className={styles.icon} onClick={copyClicked}>
-                      <Isvg src={copyIcon} />
+                      <Copy />
                     </span>
                   </section>
                 </div>

app/components/Settings/Fiat/Fiat.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import FaAngleLeft from 'react-icons/lib/fa/angle-left'
-import Isvg from 'react-inlinesvg'
+import Check from 'components/Icon/Check'
-import checkIcon from 'icons/check.svg'
 
 import { FormattedMessage } from 'react-intl'
 import messages from './messages'
@@ -23,7 +22,7 @@ const Fiat = ({ fiatTicker, fiatTickers, disableSubMenu, setFiatTicker }) => (
           onClick={() => setFiatTicker(ft)}
         >
           <span>{ft}</span>
-          {fiatTicker === ft && <Isvg src={checkIcon} />}
+          {fiatTicker === ft && <Check />}
         </li>
       ))}
     </ul>

app/components/Settings/Locale/Locale.js

@@ -2,8 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import FaAngleLeft from 'react-icons/lib/fa/angle-left'
 import { getLanguageName } from 'lib/i18n'
-import Isvg from 'react-inlinesvg'
+import Check from 'components/Icon/Check'
-import checkIcon from 'icons/check.svg'
 
 import { FormattedMessage } from 'react-intl'
 import messages from './messages'
@@ -30,7 +29,7 @@ const Translate = ({ locales, disableSubMenu, currentLocale, setLocale }) => {
               onClick={() => changeLocale(lang)}
             >
               <span>{getLanguageName(lang)}</span>
-              {currentLocale === lang && <Isvg src={checkIcon} />}
+              {currentLocale === lang && <Check />}
             </li>
           )
         })}

app/components/Settings/Theme/Theme.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import FaAngleLeft from 'react-icons/lib/fa/angle-left'
-import Isvg from 'react-inlinesvg'
+import Check from 'components/Icon/Check'
-import checkIcon from 'icons/check.svg'
 
 import { FormattedMessage } from 'react-intl'
 import messages from './messages'
@@ -26,7 +25,7 @@ const Theme = ({ currentTheme, disableSubMenu, setTheme, themes }) => (
             onClick={() => setTheme(theme)}
           >
             <FormattedMessage {...messages[theme]} />
-            {currentTheme === theme && <Isvg src={checkIcon} />}
+            {currentTheme === theme && <Check />}
           </li>
         )
       })}

app/components/Wallet/ReceiveModal/ReceiveModal.js

@@ -2,12 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import copy from 'copy-to-clipboard'
 import QRCode from 'qrcode.react'
-import copyIcon from 'icons/copy.svg'
+import Copy from 'components/Icon/Copy'
-import Isvg from 'react-inlinesvg'
+import X from 'components/Icon/X'
-
-import x from 'icons/x.svg'
 import { showNotification } from 'lib/utils/notifications'
-
 import { FormattedMessage, injectIntl } from 'react-intl'
 import messages from './messages'
 
@@ -49,7 +46,7 @@ class ReceiveModal extends React.Component {
       <div className={styles.container}>
         <div className={styles.closeContainer}>
           <span onClick={closeReceiveModal}>
-            <Isvg src={x} />
+            <X />
           </span>
         </div>
 
@@ -98,7 +95,7 @@ class ReceiveModal extends React.Component {
                   className={`${styles.copy} hint--left`}
                   data-hint={intl.formatMessage({ ...messages.copy_pubkey })}
                 >
-                  <Isvg src={copyIcon} />
+                  <Copy />
                 </span>
               </p>
             </div>
@@ -114,7 +111,7 @@ class ReceiveModal extends React.Component {
                   className={`${styles.copy} hint--left`}
                   data-hint={intl.formatMessage({ ...messages.copy_address })}
                 >
-                  <Isvg src={copyIcon} />
+                  <Copy />
                 </span>
               </p>
             </div>

app/components/Wallet/Wallet.js

@@ -2,17 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import FaAngleUp from 'react-icons/lib/fa/angle-up'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
-import Isvg from 'react-inlinesvg'
 
 import { btc, blockExplorer } from 'lib/utils'
 import Value from 'components/Value'
-import AnimatedCheckmark from 'components/AnimatedCheckmark'
 import Settings from 'components/Settings'
 import Button from 'components/UI/Button'
 
-import zapLogo from 'icons/zap-logo.svg'
+import CheckAnimated from 'components/Icon/CheckAnimated'
-import zapLogoBlack from 'icons/zap-logo-black.svg'
+import ZapLogo from 'components/Icon/ZapLogo'
-import qrCode from 'icons/qrcode.svg'
+import ZapLogoBlack from 'components/Icon/ZapLogoBlack'
+import Qrcode from 'components/Icon/Qrcode'
 
 import { FormattedNumber, FormattedMessage } from 'react-intl'
 import messages from './messages'
@@ -54,7 +53,11 @@ const Wallet = ({
       <div className={styles.content}>
         <header className={styles.header}>
           <section className={styles.logo}>
-            <Isvg className={styles.bitcoinLogo} src={theme === 'light' ? zapLogoBlack : zapLogo} />
+            {theme === 'light' ? (
+              <ZapLogoBlack width="70px" height="32px" />
+            ) : (
+              <ZapLogo width="70px" height="32px" />
+            )}
             {info.data.testnet && <span className={styles.testnetPill}>Testnet</span>}
           </section>
 
@@ -74,7 +77,7 @@ const Wallet = ({
         <div className={styles.left}>
           <div className={styles.leftContent}>
             <span onClick={openReceiveModal} className={styles.qrCode}>
-              <Isvg className={styles.bitcoinLogo} src={qrCode} />
+              <Qrcode width="20px" height="32px" />
             </span>
             <div className={styles.details}>
               <h1>
@@ -138,7 +141,7 @@ const Wallet = ({
             {showSuccessPayScreen && (
               <span>
                 <section className={styles.icon}>
-                  <AnimatedCheckmark />
+                  <CheckAnimated />
                 </section>
                 <section>
                   <FormattedMessage {...messages.payment_success} />
@@ -148,7 +151,7 @@ const Wallet = ({
             {successTransactionScreen.show && (
               <span>
                 <section className={styles.icon}>
-                  <AnimatedCheckmark />
+                  <CheckAnimated />
                 </section>
                 <section>
                   <span

package.json

@@ -325,7 +325,6 @@
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
     "react-hot-loader": "^4.3.11",
-    "react-inlinesvg": "^0.8.1",
     "react-intl": "^2.7.1",
     "react-intl-redux": "^2.0.2",
     "react-redux": "^5.0.7",

test/unit/components/CryptoIcon.spec.js

@@ -1,11 +1,9 @@
 import React from 'react'
 import { configure, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import Isvg from 'react-inlinesvg'
 import CryptoIcon from 'components/CryptoIcon'
-
+import SkinnyBitcoin from 'components/Icon/SkinnyBitcoin'
-import skinnyBitcoinIcon from 'icons/skinny-bitcoin.svg'
+import Litecoin from 'components/Icon/Litecoin'
-import litecoinIcon from 'icons/litecoin.svg'
 
 configure({ adapter: new Adapter() })
 
@@ -27,7 +25,7 @@ describe('component.CryptoIcon', () => {
     const props = { ...defaultProps, currency: 'btc' }
     const el = shallow(<CryptoIcon {...props} />)
     it('should show btc symbol', () => {
-      expect(el.find(Isvg).props().src).toContain(skinnyBitcoinIcon)
+      expect(el.find(SkinnyBitcoin)).toHaveLength(1)
     })
   })
 
@@ -35,7 +33,7 @@ describe('component.CryptoIcon', () => {
     const props = { ...defaultProps, currency: 'ltc' }
     const el = shallow(<CryptoIcon {...props} />)
     it('should show ltc symbol', () => {
-      expect(el.find(Isvg).props().src).toContain(litecoinIcon)
+      expect(el.find(Litecoin)).toHaveLength(1)
     })
   })
 })

test/unit/components/LoadingBolt.spec.js

@@ -1,11 +1,8 @@
 import React from 'react'
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import Isvg from 'react-inlinesvg'
-
 import LoadingBolt from 'components/LoadingBolt'
-import cloudboltIcon from 'icons/cloudbolt.svg'
+import CloudLightning from 'components/Icon/CloudLightning'
-
 import { mountWithIntl } from '../__helpers__/intl-enzyme-test-helper'
 
 configure({ adapter: new Adapter() })
@@ -13,7 +10,7 @@ configure({ adapter: new Adapter() })
 describe('component.LoadingBolt', () => {
   const el = mountWithIntl(<LoadingBolt theme="dark" />)
   it('should show defaults', () => {
-    expect(el.find(Isvg).props().src).toContain(cloudboltIcon)
+    expect(el.find(CloudLightning)).toHaveLength(1)
     expect(el.text()).toContain('loading')
   })
 })

yarn.lock

@@ -8573,15 +8573,6 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-httpplease@^0.16.4:
-  version "0.16.4"
-  resolved "https://registry.yarnpkg.com/httpplease/-/httpplease-0.16.4.tgz#d382ebe230ef5079080b4e9ffebf316a9e75c0da"
-  integrity sha1-04Lr4jDvUHkIC06f/r8xap51wNo=
-  dependencies:
-    urllite "~0.5.0"
-    xmlhttprequest "*"
-    xtend "~3.0.0"
-
 https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
@@ -13698,14 +13689,6 @@ react-icons@^2.2.7:
   dependencies:
     react-icon-base "2.1.0"
 
-react-inlinesvg@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-0.8.1.tgz#d981da38985d2cd0b83628eaf918ca4834f02b5d"
-  integrity sha512-rdeqawsT17tKvY3B9rfHsNUpZ9RpDP7URNLCrv4NifWcIoPcBxAc7Vel1pK7hyAYKgv6DDMaf8x9PB3jyWjW4A==
-  dependencies:
-    httpplease "^0.16.4"
-    once "^1.4.0"
-
 react-inspector@^2.2.2, react-inspector@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.3.0.tgz#fc9c1d38ab687fc0d190dcaf133ae40158968fc8"
@@ -16809,13 +16792,6 @@ url@^0.11.0, url@~0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-urllite@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/urllite/-/urllite-0.5.0.tgz#1b7bb9ca3fb0db9520de113466bbcf7cc341451a"
-  integrity sha1-G3u5yj+w25Ug3hE0ZrvPfMNBRRo=
-  dependencies:
-    xtend "~4.0.0"
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -17494,17 +17470,12 @@ xmldom@0.1.x:
   resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
   integrity sha1-1QH5ezvbQDr4757MIFcxh6rawOk=
 
-xmlhttprequest@*:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
-  integrity sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=
-
 xregexp@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
   integrity sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==
 
-xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
   integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=
@@ -17516,11 +17487,6 @@ xtend@~2.1.1:
   dependencies:
     object-keys "~0.4.0"
 
-xtend@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-3.0.0.tgz#5cce7407baf642cba7becda568111c493f59665a"
-  integrity sha1-XM50B7r2Qsunvs2laBEcST9ZZlo=
-
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"