From 0c7e75eb05c5f6d4d215757bb65b0196817fba77 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Thu, 21 Jun 2018 19:49:56 +0200
Subject: [PATCH] perf(bundle-size): only import used react icons

The final size of renderer.prod.js is about 4.75mb. 2.35mb of this comes
from react-icons.

Update the react icon imports to import only the specific icons that we
use. This reduces the final size of renderer.prod.js by about 50%
---
 app/components/Activity/InvoiceModal.js      | 2 +-
 app/components/Activity/PaymentModal.js      | 2 +-
 app/components/Activity/TransactionModal.js  | 2 +-
 app/components/Contacts/ContactModal.js      | 4 ++--
 app/components/Contacts/ContactsForm.js      | 5 +++--
 app/components/Contacts/Network.js           | 5 ++++-
 app/components/Contacts/SubmitChannelForm.js | 2 +-
 app/components/CurrencyIcon/CurrencyIcon.js  | 2 +-
 app/components/Form/Pay.js                   | 2 +-
 app/components/Form/Request.js               | 2 +-
 app/components/GlobalError/GlobalError.js    | 2 +-
 app/components/Onboarding/Autopilot.js       | 3 ++-
 app/components/Onboarding/ConnectionType.js  | 3 ++-
 app/components/Onboarding/FormContainer.js   | 3 ++-
 app/components/Onboarding/Signup.js          | 3 ++-
 app/components/Wallet/Wallet.js              | 2 +-
 test/components/CurrencyIcon.spec.js         | 2 +-
 17 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/app/components/Activity/InvoiceModal.js b/app/components/Activity/InvoiceModal.js
index a78e6f12..391ecc42 100644
--- a/app/components/Activity/InvoiceModal.js
+++ b/app/components/Activity/InvoiceModal.js
@@ -8,7 +8,7 @@ import QRCode from 'qrcode.react'
 import copy from 'copy-to-clipboard'
 import { showNotification } from 'notifications'
 
-import { FaAngleDown } from 'react-icons/lib/fa'
+import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import Value from 'components/Value'
 import Countdown from './Countdown'
diff --git a/app/components/Activity/PaymentModal.js b/app/components/Activity/PaymentModal.js
index 265699d5..411ceaec 100644
--- a/app/components/Activity/PaymentModal.js
+++ b/app/components/Activity/PaymentModal.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import Moment from 'react-moment'
 import 'moment-timezone'
 
-import { FaAngleDown } from 'react-icons/lib/fa'
+import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import Isvg from 'react-inlinesvg'
 import paperPlane from 'icons/paper_plane.svg'
diff --git a/app/components/Activity/TransactionModal.js b/app/components/Activity/TransactionModal.js
index 1a6c59ea..8eef184a 100644
--- a/app/components/Activity/TransactionModal.js
+++ b/app/components/Activity/TransactionModal.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import Moment from 'react-moment'
 import 'moment-timezone'
 
-import { FaAngleDown } from 'react-icons/lib/fa'
+import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import Isvg from 'react-inlinesvg'
 import paperPlane from 'icons/paper_plane.svg'
diff --git a/app/components/Contacts/ContactModal.js b/app/components/Contacts/ContactModal.js
index e02710b9..aa6a0671 100644
--- a/app/components/Contacts/ContactModal.js
+++ b/app/components/Contacts/ContactModal.js
@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import find from 'lodash/find'
 import ReactModal from 'react-modal'
-import { FaCircle } from 'react-icons/lib/fa'
-import { MdClose } from 'react-icons/lib/md'
+import FaCircle from 'react-icons/lib/fa/circle'
+import MdClose from 'react-icons/lib/md/close'
 
 import { btc } from 'utils'
 
diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index aaf24763..6e9a8f9e 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -1,8 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
-import { MdClose } from 'react-icons/lib/md'
-import { FaCircle, FaQuestionCircle } from 'react-icons/lib/fa'
+import MdClose from 'react-icons/lib/md/close'
+import FaCircle from 'react-icons/lib/fa/circle'
+import FaQuestionCircle from 'react-icons/lib/fa/question-circle'
 import styles from './ContactsForm.scss'
 
 class ContactsForm extends React.Component {
diff --git a/app/components/Contacts/Network.js b/app/components/Contacts/Network.js
index 2fbbb4ff..077b9ccf 100644
--- a/app/components/Contacts/Network.js
+++ b/app/components/Contacts/Network.js
@@ -2,7 +2,10 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import find from 'lodash/find'
 import Isvg from 'react-inlinesvg'
-import { FaExternalLink, FaCircle, FaRepeat, FaAngleDown } from 'react-icons/lib/fa'
+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 'utils'
 import plus from 'icons/plus.svg'
 import search from 'icons/search.svg'
diff --git a/app/components/Contacts/SubmitChannelForm.js b/app/components/Contacts/SubmitChannelForm.js
index d6744096..153dbd7a 100644
--- a/app/components/Contacts/SubmitChannelForm.js
+++ b/app/components/Contacts/SubmitChannelForm.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { FaAngleDown } from 'react-icons/lib/fa'
+import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import styles from './SubmitChannelForm.scss'
 
diff --git a/app/components/CurrencyIcon/CurrencyIcon.js b/app/components/CurrencyIcon/CurrencyIcon.js
index 56796f68..89972a64 100644
--- a/app/components/CurrencyIcon/CurrencyIcon.js
+++ b/app/components/CurrencyIcon/CurrencyIcon.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FaDollar } from 'react-icons/lib/fa'
+import FaDollar from 'react-icons/lib/fa/dollar'
 import CryptoIcon from '../CryptoIcon'
 
 const CurrencyIcon = ({ currency, crypto, styles }) => {
diff --git a/app/components/Form/Pay.js b/app/components/Form/Pay.js
index cc1c60f0..c1dd3d1b 100644
--- a/app/components/Form/Pay.js
+++ b/app/components/Form/Pay.js
@@ -5,7 +5,7 @@ import find from 'lodash/find'
 import Isvg from 'react-inlinesvg'
 import paperPlane from 'icons/paper_plane.svg'
 import link from 'icons/link.svg'
-import { FaAngleDown } from 'react-icons/lib/fa'
+import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import { btc } from 'utils'
 
diff --git a/app/components/Form/Request.js b/app/components/Form/Request.js
index a3254aa8..66075818 100644
--- a/app/components/Form/Request.js
+++ b/app/components/Form/Request.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import Isvg from 'react-inlinesvg'
 import hand from 'icons/hand.svg'
-import { FaAngleDown } from 'react-icons/lib/fa'
+import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import { btc } from 'utils'
 import styles from './Request.scss'
diff --git a/app/components/GlobalError/GlobalError.js b/app/components/GlobalError/GlobalError.js
index 01458cc2..03457d17 100644
--- a/app/components/GlobalError/GlobalError.js
+++ b/app/components/GlobalError/GlobalError.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { MdClose } from 'react-icons/lib/md'
+import MdClose from 'react-icons/lib/md/close'
 import styles from './GlobalError.scss'
 
 class GlobalError extends React.Component {
diff --git a/app/components/Onboarding/Autopilot.js b/app/components/Onboarding/Autopilot.js
index aa40e41d..da51572d 100644
--- a/app/components/Onboarding/Autopilot.js
+++ b/app/components/Onboarding/Autopilot.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FaCircle, FaCircleThin } from 'react-icons/lib/fa'
+import FaCircle from 'react-icons/lib/fa/circle'
+import FaCircleThin from 'react-icons/lib/fa/circle-thin'
 import styles from './Autopilot.scss'
 
 const Autopilot = ({ autopilot, setAutopilot }) => (
diff --git a/app/components/Onboarding/ConnectionType.js b/app/components/Onboarding/ConnectionType.js
index 6e188471..620e8619 100644
--- a/app/components/Onboarding/ConnectionType.js
+++ b/app/components/Onboarding/ConnectionType.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FaCircle, FaCircleThin } from 'react-icons/lib/fa'
+import FaCircle from 'react-icons/lib/fa/circle'
+import FaCircleThin from 'react-icons/lib/fa/circle-thin'
 import styles from './ConnectionType.scss'
 
 const ConnectionType = ({ connectionType, setConnectionType }) => (
diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer.js
index 7dc1a216..a8633698 100644
--- a/app/components/Onboarding/FormContainer.js
+++ b/app/components/Onboarding/FormContainer.js
@@ -2,7 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
 
-import { FaAngleLeft, FaAngleRight } from 'react-icons/lib/fa'
+import FaAngleLeft from 'react-icons/lib/fa/angle-left'
+import FaAngleRight from 'react-icons/lib/fa/angle-right'
 
 import zapLogo from 'icons/zap_logo.svg'
 import styles from './FormContainer.scss'
diff --git a/app/components/Onboarding/Signup.js b/app/components/Onboarding/Signup.js
index 7b3b3b2b..3bfb9936 100644
--- a/app/components/Onboarding/Signup.js
+++ b/app/components/Onboarding/Signup.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FaCircle, FaCircleThin } from 'react-icons/lib/fa'
+import FaCircle from 'react-icons/lib/fa/circle'
+import FaCircleThin from 'react-icons/lib/fa/circle-thin'
 import styles from './Signup.scss'
 
 const Signup = ({ signupForm, setSignupCreate, setSignupImport }) => (
diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js
index 5bcf774c..c0e8b763 100644
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FaAngleDown } from 'react-icons/lib/fa'
+import FaAngleDown from 'react-icons/lib/fa/angle-down'
 import Isvg from 'react-inlinesvg'
 
 import { btc, blockExplorer } from 'utils'
diff --git a/test/components/CurrencyIcon.spec.js b/test/components/CurrencyIcon.spec.js
index bf7ee136..594ed13c 100644
--- a/test/components/CurrencyIcon.spec.js
+++ b/test/components/CurrencyIcon.spec.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import { FaDollar } from 'react-icons/lib/fa'
+import FaDollar from 'react-icons/lib/fa/dollar'
 import CryptoIcon from '../../app/components/CryptoIcon'
 import CurrencyIcon from '../../app/components/CurrencyIcon'