diff --git a/.svgrrc b/.svgrrc new file mode 100644 index 00000000..6e941549 --- /dev/null +++ b/.svgrrc @@ -0,0 +1,9 @@ +{ + "icon": true, + "replaceAttrValues": { + "#FD9800": "currentColor", + "#FFF": "currentColor", + "#F5A623": "currentColor", + "#010002": "currentColor" + } +} diff --git a/app/components/Activity/Invoice/Invoice.js b/app/components/Activity/Invoice/Invoice.js index 29e69788..02406d39 100644 --- a/app/components/Activity/Invoice/Invoice.js +++ b/app/components/Activity/Invoice/Invoice.js @@ -4,7 +4,7 @@ import { btc } from 'lib/utils' import Isvg from 'react-inlinesvg' import Value from 'components/Value' -import checkmarkIcon from 'icons/check_circle.svg' +import checkmarkIcon from 'icons/check-circle.svg' import { FormattedNumber, FormattedTime, FormattedMessage, injectIntl } from 'react-intl' import messages from './messages' diff --git a/app/components/Activity/PaymentModal/PaymentModal.js b/app/components/Activity/PaymentModal/PaymentModal.js index 5c0149ad..bd8898f9 100644 --- a/app/components/Activity/PaymentModal/PaymentModal.js +++ b/app/components/Activity/PaymentModal/PaymentModal.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import FaAngleDown from 'react-icons/lib/fa/angle-down' import Isvg from 'react-inlinesvg' -import paperPlane from 'icons/paper_plane.svg' +import paperPlane from 'icons/paper-plane.svg' import zap from 'icons/zap.svg' import Value from 'components/Value' diff --git a/app/components/Activity/Transaction/Transaction.js b/app/components/Activity/Transaction/Transaction.js index 7252285c..1a4a6ecf 100644 --- a/app/components/Activity/Transaction/Transaction.js +++ b/app/components/Activity/Transaction/Transaction.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import Isvg from 'react-inlinesvg' -import link from 'icons/link.svg' +import link from 'icons/chain-link.svg' import { btc } from 'lib/utils' import Value from 'components/Value' diff --git a/app/components/Activity/TransactionModal/TransactionModal.js b/app/components/Activity/TransactionModal/TransactionModal.js index fbbf9a16..4e4f925d 100644 --- a/app/components/Activity/TransactionModal/TransactionModal.js +++ b/app/components/Activity/TransactionModal/TransactionModal.js @@ -2,9 +2,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 'icons/paper_plane.svg' +import paperPlane from 'icons/paper-plane.svg' import hand from 'icons/hand.svg' -import link from 'icons/link.svg' +import link from 'icons/chain-link.svg' import { blockExplorer } from 'lib/utils' import Value from 'components/Value' diff --git a/app/components/CryptoIcon/CryptoIcon.js b/app/components/CryptoIcon/CryptoIcon.js index c9182a01..71e9612d 100644 --- a/app/components/CryptoIcon/CryptoIcon.js +++ b/app/components/CryptoIcon/CryptoIcon.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import Isvg from 'react-inlinesvg' -import skinnyBitcoinIcon from 'icons/skinny_bitcoin.svg' +import skinnyBitcoinIcon from 'icons/skinny-bitcoin.svg' import litecoinIcon from 'icons/litecoin.svg' const CryptoIcon = ({ currency, styles }) => { diff --git a/app/components/Form/Pay/Pay.js b/app/components/Form/Pay/Pay.js index d6e6f829..a817f030 100644 --- a/app/components/Form/Pay/Pay.js +++ b/app/components/Form/Pay/Pay.js @@ -2,8 +2,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import Isvg from 'react-inlinesvg' -import paperPlane from 'icons/paper_plane.svg' -import link from 'icons/link.svg' +import paperPlane from 'icons/paper-plane.svg' +import link from 'icons/chain-link.svg' import FaAngleDown from 'react-icons/lib/fa/angle-down' import { btc } from 'lib/utils' diff --git a/app/components/Icon/.eslintrc b/app/components/Icon/.eslintrc new file mode 100644 index 00000000..9542f520 --- /dev/null +++ b/app/components/Icon/.eslintrc @@ -0,0 +1,5 @@ +{ + "rules": { + "max-len": 0 + } +} diff --git a/app/components/Icon/BigArrowRight.js b/app/components/Icon/BigArrowRight.js new file mode 100644 index 00000000..bde1bc40 --- /dev/null +++ b/app/components/Icon/BigArrowRight.js @@ -0,0 +1,16 @@ +import React from 'react' + +const SvgBigArrowRight = props => ( + + + +) + +export default SvgBigArrowRight diff --git a/app/components/Icon/Bitcoin.js b/app/components/Icon/Bitcoin.js new file mode 100644 index 00000000..afe3b970 --- /dev/null +++ b/app/components/Icon/Bitcoin.js @@ -0,0 +1,13 @@ +import React from 'react' + +const SvgBitcoin = props => ( + + + +) + +export default SvgBitcoin diff --git a/app/components/Icon/Btcpay.js b/app/components/Icon/Btcpay.js new file mode 100644 index 00000000..27faa57e --- /dev/null +++ b/app/components/Icon/Btcpay.js @@ -0,0 +1,38 @@ +import React from 'react' + +const SvgBtcpay = props => ( + + + + + + + + + + + +) + +export default SvgBtcpay diff --git a/app/components/Icon/ChainLink.js b/app/components/Icon/ChainLink.js new file mode 100644 index 00000000..59e14f31 --- /dev/null +++ b/app/components/Icon/ChainLink.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgChainLink = props => ( + + + + +) + +export default SvgChainLink diff --git a/app/components/Icon/Channels.js b/app/components/Icon/Channels.js new file mode 100644 index 00000000..529ef3ad --- /dev/null +++ b/app/components/Icon/Channels.js @@ -0,0 +1,14 @@ +import React from 'react' + +const SvgChannels = props => ( + + + + + + + + +) + +export default SvgChannels diff --git a/app/components/Icon/Check.js b/app/components/Icon/Check.js new file mode 100644 index 00000000..f5a5ac00 --- /dev/null +++ b/app/components/Icon/Check.js @@ -0,0 +1,20 @@ +import React from 'react' + +const SvgCheck = props => ( + + + +) + +export default SvgCheck diff --git a/app/components/Icon/CheckAnimated.js b/app/components/Icon/CheckAnimated.js new file mode 100644 index 00000000..a49d236b --- /dev/null +++ b/app/components/Icon/CheckAnimated.js @@ -0,0 +1,10 @@ +import React from 'react' + +const SvgCheckAnimated = props => ( + + + + +) + +export default SvgCheckAnimated diff --git a/app/components/Icon/CheckCircle.js b/app/components/Icon/CheckCircle.js new file mode 100644 index 00000000..9c1bbc30 --- /dev/null +++ b/app/components/Icon/CheckCircle.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgCheckCircle = props => ( + + + + +) + +export default SvgCheckCircle diff --git a/app/components/Icon/Clock.js b/app/components/Icon/Clock.js new file mode 100644 index 00000000..8a776a59 --- /dev/null +++ b/app/components/Icon/Clock.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgClock = props => ( + + + + +) + +export default SvgClock diff --git a/app/components/Icon/CloudLightning.js b/app/components/Icon/CloudLightning.js new file mode 100644 index 00000000..2205129a --- /dev/null +++ b/app/components/Icon/CloudLightning.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgCloudLightning = props => ( + + + + +) + +export default SvgCloudLightning diff --git a/app/components/Icon/Cloudbolt.js b/app/components/Icon/Cloudbolt.js new file mode 100644 index 00000000..9d568f9e --- /dev/null +++ b/app/components/Icon/Cloudbolt.js @@ -0,0 +1,13 @@ +import React from 'react' + +const SvgCloudbolt = props => ( + + + +) + +export default SvgCloudbolt diff --git a/app/components/Icon/Contacts.js b/app/components/Icon/Contacts.js new file mode 100644 index 00000000..e8332317 --- /dev/null +++ b/app/components/Icon/Contacts.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgContacts = props => ( + + + + + + + +) + +export default SvgContacts diff --git a/app/components/Icon/Copy.js b/app/components/Icon/Copy.js new file mode 100644 index 00000000..245029a2 --- /dev/null +++ b/app/components/Icon/Copy.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgCopy = props => ( + + + + +) + +export default SvgCopy diff --git a/app/components/Icon/Eye.js b/app/components/Icon/Eye.js new file mode 100644 index 00000000..d9d0a56b --- /dev/null +++ b/app/components/Icon/Eye.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgEye = props => ( + + + + +) + +export default SvgEye diff --git a/app/components/Icon/Globe.js b/app/components/Icon/Globe.js new file mode 100644 index 00000000..db6aa774 --- /dev/null +++ b/app/components/Icon/Globe.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgGlobe = props => ( + + + + +) + +export default SvgGlobe diff --git a/app/components/Icon/Hand.js b/app/components/Icon/Hand.js new file mode 100644 index 00000000..d8e4311c --- /dev/null +++ b/app/components/Icon/Hand.js @@ -0,0 +1,12 @@ +import React from 'react' + +const SvgHand = props => ( + + + + + + +) + +export default SvgHand diff --git a/app/components/Icon/Help.js b/app/components/Icon/Help.js new file mode 100644 index 00000000..1126305a --- /dev/null +++ b/app/components/Icon/Help.js @@ -0,0 +1,22 @@ +import React from 'react' + +const SvgHelp = props => ( + + + + + +) + +export default SvgHelp diff --git a/app/components/Icon/Help2.js b/app/components/Icon/Help2.js new file mode 100644 index 00000000..a717a990 --- /dev/null +++ b/app/components/Icon/Help2.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgHelp2 = props => ( + + + + + + + +) + +export default SvgHelp2 diff --git a/app/components/Icon/IconPlus.js b/app/components/Icon/IconPlus.js new file mode 100644 index 00000000..2fee840c --- /dev/null +++ b/app/components/Icon/IconPlus.js @@ -0,0 +1,12 @@ +import React from 'react' + +const SvgIconPlus = props => ( + + + + + + +) + +export default SvgIconPlus diff --git a/app/components/Icon/Litecoin.js b/app/components/Icon/Litecoin.js new file mode 100644 index 00000000..78ae1495 --- /dev/null +++ b/app/components/Icon/Litecoin.js @@ -0,0 +1,9 @@ +import React from 'react' + +const SvgLitecoin = props => ( + + + +) + +export default SvgLitecoin diff --git a/app/components/Icon/LndLogo.js b/app/components/Icon/LndLogo.js new file mode 100644 index 00000000..1cdb8007 --- /dev/null +++ b/app/components/Icon/LndLogo.js @@ -0,0 +1,43 @@ +import React from 'react' + +const SvgLndLogo = props => ( + + + + + + + + + + + + + +) + +export default SvgLndLogo diff --git a/app/components/Icon/LtcLogo.js b/app/components/Icon/LtcLogo.js new file mode 100644 index 00000000..1aaef919 --- /dev/null +++ b/app/components/Icon/LtcLogo.js @@ -0,0 +1,20 @@ +import React from 'react' + +const SvgLtcLogo = props => ( + + + + + +) + +export default SvgLtcLogo diff --git a/app/components/Icon/Network.js b/app/components/Icon/Network.js new file mode 100644 index 00000000..5f2dbcf8 --- /dev/null +++ b/app/components/Icon/Network.js @@ -0,0 +1,20 @@ +import React from 'react' + +const SvgNetwork = props => ( + + + + + + +) + +export default SvgNetwork diff --git a/app/components/Icon/PaperPlane.js b/app/components/Icon/PaperPlane.js new file mode 100644 index 00000000..1a3315cb --- /dev/null +++ b/app/components/Icon/PaperPlane.js @@ -0,0 +1,18 @@ +import React from 'react' + +const SvgPaperPlane = props => ( + + + + + +) + +export default SvgPaperPlane diff --git a/app/components/Icon/Peers.js b/app/components/Icon/Peers.js new file mode 100644 index 00000000..7cf19faa --- /dev/null +++ b/app/components/Icon/Peers.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgPeers = props => ( + + + + + + + +) + +export default SvgPeers diff --git a/app/components/Icon/Plus.js b/app/components/Icon/Plus.js new file mode 100644 index 00000000..5c6169fb --- /dev/null +++ b/app/components/Icon/Plus.js @@ -0,0 +1,20 @@ +import React from 'react' + +const SvgPlus = props => ( + + + +) + +export default SvgPlus diff --git a/app/components/Icon/PlusCircle.js b/app/components/Icon/PlusCircle.js new file mode 100644 index 00000000..e7de4594 --- /dev/null +++ b/app/components/Icon/PlusCircle.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgPlusCircle = props => ( + + + + +) + +export default SvgPlusCircle diff --git a/app/components/Icon/Qrcode.js b/app/components/Icon/Qrcode.js new file mode 100644 index 00000000..891ccdfa --- /dev/null +++ b/app/components/Icon/Qrcode.js @@ -0,0 +1,12 @@ +import React from 'react' + +const SvgQrcode = props => ( + + + + + + +) + +export default SvgQrcode diff --git a/app/components/Icon/Search.js b/app/components/Icon/Search.js new file mode 100644 index 00000000..572c31a6 --- /dev/null +++ b/app/components/Icon/Search.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgSearch = props => ( + + + + +) + +export default SvgSearch diff --git a/app/components/Icon/Settings.js b/app/components/Icon/Settings.js new file mode 100644 index 00000000..fdcf1572 --- /dev/null +++ b/app/components/Icon/Settings.js @@ -0,0 +1,20 @@ +import React from 'react' + +const SvgSettings = props => ( + + + + + + +) + +export default SvgSettings diff --git a/app/components/Icon/SkinnyBitcoin.js b/app/components/Icon/SkinnyBitcoin.js new file mode 100644 index 00000000..f935a33e --- /dev/null +++ b/app/components/Icon/SkinnyBitcoin.js @@ -0,0 +1,12 @@ +import React from 'react' + +const SvgSkinnyBitcoin = props => ( + + + + + + +) + +export default SvgSkinnyBitcoin diff --git a/app/components/Icon/SystemArrowLeft.js b/app/components/Icon/SystemArrowLeft.js new file mode 100644 index 00000000..8ad484ea --- /dev/null +++ b/app/components/Icon/SystemArrowLeft.js @@ -0,0 +1,6 @@ +import React from 'react' +import MdArrowBack from 'react-icons/lib/md/arrow-back' + +const SystemIcon = props => + +export default SystemIcon diff --git a/app/components/Icon/SystemArrowRight.js b/app/components/Icon/SystemArrowRight.js new file mode 100644 index 00000000..b9ae4401 --- /dev/null +++ b/app/components/Icon/SystemArrowRight.js @@ -0,0 +1,6 @@ +import React from 'react' +import MdArrowForward from 'react-icons/lib/md/arrow-forward' + +const SystemIcon = props => + +export default SystemIcon diff --git a/app/components/Icon/SystemError.js b/app/components/Icon/SystemError.js new file mode 100644 index 00000000..964caec9 --- /dev/null +++ b/app/components/Icon/SystemError.js @@ -0,0 +1,6 @@ +import React from 'react' +import FaTimesCircle from 'react-icons/lib/fa/times-circle' + +const SystemIcon = props => + +export default SystemIcon diff --git a/app/components/Icon/SystemNavNext.js b/app/components/Icon/SystemNavNext.js new file mode 100644 index 00000000..bbf79fd9 --- /dev/null +++ b/app/components/Icon/SystemNavNext.js @@ -0,0 +1,6 @@ +import React from 'react' +import MdNavigateNext from 'react-icons/lib/md/navigate-next' + +const SystemIcon = props => + +export default SystemIcon diff --git a/app/components/Icon/SystemNavPrevious.js b/app/components/Icon/SystemNavPrevious.js new file mode 100644 index 00000000..89a20d3a --- /dev/null +++ b/app/components/Icon/SystemNavPrevious.js @@ -0,0 +1,6 @@ +import React from 'react' +import MdNavigateBefore from 'react-icons/lib/md/navigate-before' + +const SystemIcon = props => + +export default SystemIcon diff --git a/app/components/Icon/SystemSuccess.js b/app/components/Icon/SystemSuccess.js new file mode 100644 index 00000000..11a8f153 --- /dev/null +++ b/app/components/Icon/SystemSuccess.js @@ -0,0 +1,6 @@ +import React from 'react' +import FaCheckCircle from 'react-icons/lib/fa/check-circle' + +const SystemIcon = props => + +export default SystemIcon diff --git a/app/components/Icon/SystemWarning.js b/app/components/Icon/SystemWarning.js new file mode 100644 index 00000000..84e7c44c --- /dev/null +++ b/app/components/Icon/SystemWarning.js @@ -0,0 +1,6 @@ +import React from 'react' +import FaExclamationCircle from 'react-icons/lib/fa/exclamation-circle' + +const SystemIcon = props => + +export default SystemIcon diff --git a/app/components/Icon/User.js b/app/components/Icon/User.js new file mode 100644 index 00000000..aa0c238c --- /dev/null +++ b/app/components/Icon/User.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgUser = props => ( + + + + +) + +export default SvgUser diff --git a/app/components/Icon/Wallet.js b/app/components/Icon/Wallet.js new file mode 100644 index 00000000..7ddf08ff --- /dev/null +++ b/app/components/Icon/Wallet.js @@ -0,0 +1,13 @@ +import React from 'react' + +const SvgWallet = props => ( + + + + + + + +) + +export default SvgWallet diff --git a/app/components/Icon/Wallet2.js b/app/components/Icon/Wallet2.js new file mode 100644 index 00000000..4e878e1c --- /dev/null +++ b/app/components/Icon/Wallet2.js @@ -0,0 +1,13 @@ +import React from 'react' + +const SvgWallet2 = props => ( + + + + + + + +) + +export default SvgWallet2 diff --git a/app/components/Icon/X.js b/app/components/Icon/X.js new file mode 100644 index 00000000..2d32ce85 --- /dev/null +++ b/app/components/Icon/X.js @@ -0,0 +1,20 @@ +import React from 'react' + +const SvgX = props => ( + + + +) + +export default SvgX diff --git a/app/components/Icon/Zap.js b/app/components/Icon/Zap.js new file mode 100644 index 00000000..7fa259df --- /dev/null +++ b/app/components/Icon/Zap.js @@ -0,0 +1,20 @@ +import React from 'react' + +const SvgZap = props => ( + + + +) + +export default SvgZap diff --git a/app/components/Icon/ZapLogo.js b/app/components/Icon/ZapLogo.js new file mode 100644 index 00000000..953ef42c --- /dev/null +++ b/app/components/Icon/ZapLogo.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgZapLogo = props => ( + + + + + + + + + +) + +export default SvgZapLogo diff --git a/app/components/Icon/ZapLogoBlack.js b/app/components/Icon/ZapLogoBlack.js new file mode 100644 index 00000000..fdfcdac4 --- /dev/null +++ b/app/components/Icon/ZapLogoBlack.js @@ -0,0 +1,21 @@ +import React from 'react' + +const SvgZapLogoBlack = props => ( + + + + + + + + + +) + +export default SvgZapLogoBlack diff --git a/app/components/LoadingBolt/LoadingBolt.js b/app/components/LoadingBolt/LoadingBolt.js index b4ca69d7..f0e5ac65 100644 --- a/app/components/LoadingBolt/LoadingBolt.js +++ b/app/components/LoadingBolt/LoadingBolt.js @@ -2,7 +2,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 cloudLightningIcon from 'icons/cloud-lightning.svg' import { FormattedMessage } from 'react-intl' import messages from './messages' diff --git a/app/components/Onboarding/FormContainer/FormContainer.js b/app/components/Onboarding/FormContainer/FormContainer.js index 9163cacd..28fecab7 100644 --- a/app/components/Onboarding/FormContainer/FormContainer.js +++ b/app/components/Onboarding/FormContainer/FormContainer.js @@ -6,9 +6,9 @@ import Isvg from 'react-inlinesvg' 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 zapLogo from 'icons/zap-logo.svg' import { FormattedMessage } from 'react-intl' -import zapLogoBlack from 'icons/zap_logo_black.svg' +import zapLogoBlack from 'icons/zap-logo-black.svg' import messages from './messages' import styles from './FormContainer.scss' diff --git a/app/components/Onboarding/Syncing/Syncing.js b/app/components/Onboarding/Syncing/Syncing.js index 08f5edae..ba115f2b 100644 --- a/app/components/Onboarding/Syncing/Syncing.js +++ b/app/components/Onboarding/Syncing/Syncing.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types' import QRCode from 'qrcode.react' import copy from 'copy-to-clipboard' import Isvg from 'react-inlinesvg' -import zapLogo from 'icons/zap_logo.svg' -import zapLogoDark from 'icons/zap_logo_black.svg' +import zapLogo from 'icons/zap-logo.svg' +import zapLogoDark from 'icons/zap-logo-black.svg' import copyIcon from 'icons/copy.svg' import { showNotification } from 'lib/utils/notifications' import { FormattedMessage, injectIntl } from 'react-intl' diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index b05ffccb..c5634f0d 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -9,8 +9,8 @@ import Value from 'components/Value' import AnimatedCheckmark from 'components/AnimatedCheckmark' import Settings from 'components/Settings' -import zapLogo from 'icons/zap_logo.svg' -import zapLogoBlack from 'icons/zap_logo_black.svg' +import zapLogo from 'icons/zap-logo.svg' +import zapLogoBlack from 'icons/zap-logo-black.svg' import qrCode from 'icons/qrcode.svg' import { FormattedNumber, FormattedMessage } from 'react-intl' diff --git a/app/icons/big-arrow-right.svg b/app/icons/big-arrow-right.svg new file mode 100644 index 00000000..2a597fdc --- /dev/null +++ b/app/icons/big-arrow-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/icons/btcpay.svg b/app/icons/btcpay.svg new file mode 100644 index 00000000..2806dcf1 --- /dev/null +++ b/app/icons/btcpay.svg @@ -0,0 +1 @@ + diff --git a/app/icons/link.svg b/app/icons/chain-link.svg similarity index 100% rename from app/icons/link.svg rename to app/icons/chain-link.svg diff --git a/app/icons/check-animated.svg b/app/icons/check-animated.svg new file mode 100644 index 00000000..4433cf25 --- /dev/null +++ b/app/icons/check-animated.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/icons/check-circle.svg b/app/icons/check-circle.svg new file mode 100644 index 00000000..a3844d4e --- /dev/null +++ b/app/icons/check-circle.svg @@ -0,0 +1 @@ + diff --git a/app/icons/cloud-lightning.svg b/app/icons/cloud-lightning.svg new file mode 100644 index 00000000..dee9d02d --- /dev/null +++ b/app/icons/cloud-lightning.svg @@ -0,0 +1 @@ + diff --git a/app/icons/cloud_lightning.svg b/app/icons/cloud_lightning.svg deleted file mode 100644 index 32d154cc..00000000 --- a/app/icons/cloud_lightning.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/icons/help_2.svg b/app/icons/help-2.svg similarity index 100% rename from app/icons/help_2.svg rename to app/icons/help-2.svg diff --git a/app/icons/icon-plus.svg b/app/icons/icon-plus.svg new file mode 100644 index 00000000..ebbffb2e --- /dev/null +++ b/app/icons/icon-plus.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/icons/lnd-logo.svg b/app/icons/lnd-logo.svg new file mode 100644 index 00000000..1bcd72a9 --- /dev/null +++ b/app/icons/lnd-logo.svg @@ -0,0 +1 @@ + diff --git a/app/icons/logo.png b/app/icons/logo.png new file mode 100644 index 00000000..7137505e Binary files /dev/null and b/app/icons/logo.png differ diff --git a/app/icons/ltc-logo.svg b/app/icons/ltc-logo.svg new file mode 100644 index 00000000..750cd098 --- /dev/null +++ b/app/icons/ltc-logo.svg @@ -0,0 +1 @@ +Litecoin diff --git a/app/icons/paper_plane.svg b/app/icons/paper-plane.svg similarity index 100% rename from app/icons/paper_plane.svg rename to app/icons/paper-plane.svg diff --git a/app/icons/check_circle.svg b/app/icons/plus-circle.svg similarity index 54% rename from app/icons/check_circle.svg rename to app/icons/plus-circle.svg index d95153c8..4291ff05 100644 --- a/app/icons/check_circle.svg +++ b/app/icons/plus-circle.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/icons/skinny_bitcoin.svg b/app/icons/skinny-bitcoin.svg similarity index 100% rename from app/icons/skinny_bitcoin.svg rename to app/icons/skinny-bitcoin.svg diff --git a/app/icons/wallet_2.svg b/app/icons/wallet-2.svg similarity index 100% rename from app/icons/wallet_2.svg rename to app/icons/wallet-2.svg diff --git a/app/icons/zap_logo_black.svg b/app/icons/zap-logo-black.svg similarity index 100% rename from app/icons/zap_logo_black.svg rename to app/icons/zap-logo-black.svg diff --git a/app/icons/zap_logo.svg b/app/icons/zap-logo.svg similarity index 100% rename from app/icons/zap_logo.svg rename to app/icons/zap-logo.svg diff --git a/package.json b/package.json index 56da6186..c69104e8 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "fetch-lnd": "node ./internals/scripts/fetch-lnd-for-packaging.js", "flow": "flow", "flow-typed": "rimraf flow-typed/npm && flow-typed install --overwrite || true", + "generate-icons": "npx @svgr/cli --icon -d app/components/Icon app/icons", "lint-base": "eslint --cache --format=node_modules/eslint-formatter-pretty", "lint": "npm run lint-base -- .", "lint-fix-base": "npm run lint-base -- --fix", diff --git a/stories/components/icon.stories.js b/stories/components/icon.stories.js new file mode 100644 index 00000000..94e7921c --- /dev/null +++ b/stories/components/icon.stories.js @@ -0,0 +1,139 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import { Box, Flex } from 'rebass' + +import SystemArrowLeft from 'components/Icon/SystemArrowLeft' +import SystemArrowRight from 'components/Icon/SystemArrowRight' +import SystemError from 'components/Icon/SystemError' +import SystemNavNext from 'components/Icon/SystemNavNext' +import SystemNavPrevious from 'components/Icon/SystemNavPrevious' +import SystemSuccess from 'components/Icon/SystemSuccess' +import SystemWarning from 'components/Icon/SystemWarning' + +import Bitcoin from 'components/Icon/Bitcoin' +import Btcpay from 'components/Icon/Btcpay' +import ChainLink from 'components/Icon/ChainLink' +import Channels from 'components/Icon/Channels' +import Check from 'components/Icon/Check' +import CheckAnimated from 'components/Icon/CheckAnimated' +import CheckCircle from 'components/Icon/CheckCircle' +import Clock from 'components/Icon/Clock' +import CloudLightning from 'components/Icon/CloudLightning' +import Cloudbolt from 'components/Icon/Cloudbolt' +import Contacts from 'components/Icon/Contacts' +import Copy from 'components/Icon/Copy' +import Eye from 'components/Icon/Eye' +import Globe from 'components/Icon/Globe' +import Hand from 'components/Icon/Hand' +import Help from 'components/Icon/Help' +import Help2 from 'components/Icon/Help2' +import BigArrowRight from 'components/Icon/BigArrowRight' +import IconPlus from 'components/Icon/IconPlus' +import Litecoin from 'components/Icon/Litecoin' +import LndLogo from 'components/Icon/LndLogo' +import LtcLogo from 'components/Icon/LtcLogo' +import Network from 'components/Icon/Network' +import PaperPlane from 'components/Icon/PaperPlane' +import Peers from 'components/Icon/Peers' +import PlusCircle from 'components/Icon/PlusCircle' +import Plus from 'components/Icon/Plus' +import Qrcode from 'components/Icon/Qrcode' +import Search from 'components/Icon/Search' +import Settings from 'components/Icon/Settings' +import SkinnyBitcoin from 'components/Icon/SkinnyBitcoin' +import User from 'components/Icon/User' +import Wallet from 'components/Icon/Wallet' +import Wallet2 from 'components/Icon/Wallet2' +import X from 'components/Icon/X' +import Zap from 'components/Icon/Zap' +import ZapLogo from 'components/Icon/ZapLogo' +import ZapLogoBlack from 'components/Icon/ZapLogoBlack' + +const iconSizes = [16, 32, 64, 128] + +const zapIconsList = { + Bitcoin, + Btcpay, + Channels, + ChainLink, + Check, + CheckAnimated, + CheckCircle, + Clock, + CloudLightning, + Cloudbolt, + Contacts, + Copy, + Eye, + Globe, + Hand, + Help, + Help2, + BigArrowRight, + IconPlus, + Litecoin, + LndLogo, + LtcLogo, + Network, + PaperPlane, + Peers, + PlusCircle, + Plus, + Qrcode, + Search, + Settings, + SkinnyBitcoin, + User, + Wallet, + Wallet2, + X, + Zap, + ZapLogo, + ZapLogoBlack +} + +const zapIconStories = storiesOf('Components.Icon.Zap', module) + +Object.keys(zapIconsList).forEach(name => { + var Icon = zapIconsList[name] + zapIconStories.add(name, () => ( + + {iconSizes.map(size => ( + + + {size} x {size}: + + + + ))} + + )) +}) + +const systemIconsList = { + SystemArrowLeft, + SystemArrowRight, + SystemError, + SystemNavNext, + SystemNavPrevious, + SystemSuccess, + SystemWarning +} + +const systemIconStories = storiesOf('Components.Icon.System', module) + +Object.keys(systemIconsList).forEach(name => { + var Icon = systemIconsList[name] + systemIconStories.add(name, () => ( + + {iconSizes.map(size => ( + + + {size} x {size}: + + + + ))} + + )) +}) diff --git a/test/unit/components/AnimatedCheckmark.spec.js b/test/unit/components/AnimatedCheckmark.spec.js deleted file mode 100644 index 105337a5..00000000 --- a/test/unit/components/AnimatedCheckmark.spec.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import { configure, shallow } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' -import Isvg from 'react-inlinesvg' - -import AnimatedCheckmark from 'components/AnimatedCheckmark' -import checkmarkIcon from 'components/AnimatedCheckmark/checkmark.svg' - -configure({ adapter: new Adapter() }) - -describe('component.AnimatedCheckmark', () => { - describe('default', () => { - it('should render default component', () => { - const el = shallow() - expect(el.find(Isvg).props().src).toContain(checkmarkIcon) - }) - }) -}) diff --git a/test/unit/components/CryptoIcon.spec.js b/test/unit/components/CryptoIcon.spec.js index 1b584971..13bdd4ea 100644 --- a/test/unit/components/CryptoIcon.spec.js +++ b/test/unit/components/CryptoIcon.spec.js @@ -4,7 +4,7 @@ import Adapter from 'enzyme-adapter-react-16' import Isvg from 'react-inlinesvg' import CryptoIcon from 'components/CryptoIcon' -import skinnyBitcoinIcon from 'icons/skinny_bitcoin.svg' +import skinnyBitcoinIcon from 'icons/skinny-bitcoin.svg' import litecoinIcon from 'icons/litecoin.svg' configure({ adapter: new Adapter() })