feat(ui): add Icon component

.svgrrc

@@ -0,0 +1,9 @@
+{
+  "icon": true,
+  "replaceAttrValues": {
+    "#FD9800": "currentColor",
+    "#FFF": "currentColor",
+    "#F5A623": "currentColor",
+    "#010002": "currentColor"
+  }
+}

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'

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'

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'

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'

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 }) => {

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'

app/components/Icon/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "max-len": 0
+  }
+}

app/components/Icon/BigArrowRight.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const SvgBigArrowRight = props => (
+  <svg viewBox="0 0 9 4" width="1em" height="1em" {...props}>
+    <path
+      d="M1 2h6M6 4l2-2-2-2"
+      fill="none"
+      fillRule="evenodd"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default SvgBigArrowRight

app/components/Icon/Bitcoin.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const SvgBitcoin = props => (
+  <svg viewBox="0 0 32 33" width="1em" height="1em" {...props}>
+    <path
+      d="M15.85 32.1C7.096 32.1 0 25.004 0 16.25S7.096.4 15.85.4 31.7 7.496 31.7 16.25 24.604 32.1 15.85 32.1zm-4.3-23.95c-.05.05-.05.05.15-.1-.15.55-.3 1.15-.45 1.7-.05.1 0 .15.1.15.4.1.85.2 1.3.35.45.15.7.6.6 1-.6 2.6-1.25 5.15-1.9 7.7-.05.35-.35.55-.75.45-.35-.05-.75-.15-1.1-.25-.15 0-.2 0-.25.15-.15.4-.35.85-.55 1.3-.1.2-.15.35-.25.55 1.2.3 2.35.6 3.5.9 0 .1-.05.15-.05.2-.25.8-.45 1.65-.65 2.5-.05.1-.05.15.1.2.5.1 1 .2 1.5.35.15.05.15 0 .2-.1.1-.45.25-.9.35-1.35.1-.45.25-.9.35-1.35.45.1.85.2 1.25.3.1.05.05.1.05.2-.25.8-.45 1.65-.65 2.5-.05.1-.05.15.1.2.45.1.95.25 1.4.35.25.1.25.05.3-.15.2-.8.4-1.65.6-2.45.05-.15.15-.2.3-.15 1 .15 2 .25 3.05.1.8-.1 1.5-.45 2.05-1.1.45-.55.7-1.15.9-1.85.15-.55.2-1.15.1-1.7-.2-.7-.6-1.25-1.2-1.7-.2-.15-.4-.25-.6-.4.1 0 .15-.05.2-.05.4-.15.8-.35 1.1-.65.4-.4.6-.9.75-1.45.2-.8.15-1.6-.3-2.35-.35-.5-.8-.9-1.3-1.2l-1.65-.75c-.15-.05-.2-.1-.15-.25.1-.25.15-.5.2-.75.15-.6.3-1.2.45-1.85-.05 0-.05-.05-.1-.05-.55-.15-1.05-.25-1.55-.4-.1-.05-.15 0-.15.1l-.15.6c-.2.65-.35 1.25-.5 1.9-.05.05-.1.15-.15.15-.4-.1-.85-.2-1.25-.3.05-.1.05-.15.05-.2.2-.8.4-1.65.6-2.45.05-.1.05-.15-.1-.2-.5-.1-.95-.2-1.45-.35-.15-.05-.2 0-.25.15-.2.85-.4 1.65-.6 2.5-.05.15-.1.2-.25.15-.55-.15-1.1-.25-1.65-.4-.55-.15-1.1-.25-1.65-.4zM14.1 20.5c.2-.75.35-1.45.55-2.15.1-.5.25-.95.35-1.45.05-.15.05-.2.2-.15 1 .2 2.05.4 2.95.9.4.25.8.5 1.05.9.55.8.15 2.05-.8 2.35-.55.2-1.1.2-1.7.15-.85-.05-1.7-.3-2.5-.5 0 0-.05-.05-.1-.05zm4.2-5.1c-.8 0-1.45-.15-2.2-.25-.2-.05-.35-.1-.55-.15-.1-.05-.15-.1-.1-.2.3-1.05.55-2.05.8-3.1.05-.15.1-.2.25-.15.75.2 1.45.35 2.15.65.45.2.9.5 1.15.95.5.85 0 1.95-.95 2.15-.2.05-.45.1-.55.1z"
+      fillRule="nonzero"
+      fill="#F5B300"
+    />
+  </svg>
+)
+
+export default SvgBitcoin

app/components/Icon/ChainLink.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgChainLink = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-link"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+  </svg>
+)
+
+export default SvgChainLink

app/components/Icon/Channels.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const SvgChannels = props => (
+  <svg viewBox="0 0 22 26" width="1em" height="1em" {...props}>
+    <g fill="currentColor" fillRule="evenodd" opacity={0.7}>
+      <path d="M13.148 22.728c-1.427 0-2.588-1.151-2.588-2.564 0-1.439 1.102-2.564 2.508-2.564.642 0 1.061.245 1.418.517a.422.422 0 1 1-.505.676c-.342-.253-.58-.346-.913-.346-.932 0-1.662.753-1.662 1.717 0 .948.781 1.717 1.742 1.717.373 0 .753-.126 1.045-.346a.426.426 0 0 1 .592.085.421.421 0 0 1-.085.591c-.441.331-.992.517-1.552.517M18.628 22.728c-.549 0-1.076-.178-1.525-.517a.422.422 0 0 1-.086-.591.42.42 0 0 1 .593-.085c.3.228.653.346 1.018.346a1.718 1.718 0 0 0 0-3.434c-.425 0-.978.151-1.232.346a.422.422 0 1 1-.507-.676c.471-.356 1.232-.517 1.74-.517a2.567 2.567 0 0 1 2.562 2.564 2.567 2.567 0 0 1-2.563 2.564" />
+      <path d="M17.854 21.085h-4.23a.42.42 0 0 1-.424-.422.42.42 0 0 1 .423-.423h4.23a.42.42 0 0 1 .424.423.42.42 0 0 1-.423.422" />
+      <path d="M11 25.384H.423A.422.422 0 0 1 0 24.96V6.328c0-.109.041-.21.116-.296L5.712.135A.429.429 0 0 1 6.019 0h13.02a.42.42 0 0 1 .423.423v15.653c0 .237-.19.424-.424.424a.422.422 0 0 1-.423-.424V.846H6.201L.846 6.496v18.04H11a.42.42 0 0 1 .423.423c0 .237-.19.424-.423.424" />
+      <path d="M5.923 6.346h-5.5A.422.422 0 0 1 0 5.923c0-.237.19-.424.423-.424H5.5V.422A.42.42 0 0 1 5.923 0a.42.42 0 0 1 .423.422v5.5c0 .237-.19.424-.423.424" />
+    </g>
+  </svg>
+)
+
+export default SvgChannels

app/components/Icon/Check.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const SvgCheck = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-check"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M20 6L9 17l-5-5" />
+  </svg>
+)
+
+export default SvgCheck

app/components/Icon/CheckAnimated.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const SvgCheckAnimated = props => (
+  <svg className="checkmark" viewBox="0 0 52 52" width="1em" height="1em" {...props}>
+    <circle className="checkmark__circle" cx={26} cy={26} r={25} fill="none" />
+    <path className="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+  </svg>
+)
+
+export default SvgCheckAnimated

app/components/Icon/CheckCircle.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgCheckCircle = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={0.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-check-circle"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14" />
+    <path d="M23 3L12 14l-3-3" />
+  </svg>
+)
+
+export default SvgCheckCircle

app/components/Icon/Clock.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgClock = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-clock"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <circle cx={12} cy={12} r={10} />
+    <path d="M12 6v6l3 3" />
+  </svg>
+)
+
+export default SvgClock

app/components/Icon/CloudLightning.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgCloudLightning = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={0.5}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-cloud-lightning"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9" />
+    <path d="M13 11l-4 6h6l-4 6" />
+  </svg>
+)
+
+export default SvgCloudLightning

app/components/Icon/Cloudbolt.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const SvgCloudbolt = props => (
+  <svg viewBox="0 0 79.536 79.536" width="1em" height="1em" {...props}>
+    <path
+      className="load-draw-svg"
+      d="M78.967 29.396c0 8.124-6.582 14.7-14.706 14.7H9.145c-4.735 0-8.575-1.799-8.575-6.54a8.576 8.576 0 0 1 8.575-8.575c.857 0 1.675.171 2.47.409 0-.067-.021-.132-.021-.202 0-5.525 4.479-9.999 10.004-9.999.228 0 .456.052.687.067-.013-.233-.075-.451-.075-.684C22.209 8.313 30.522 0 40.788 0c9.264 0 16.896 6.814 18.289 15.689 1.61-.616 3.351-.991 5.184-.991 8.124 0 14.706 6.581 14.706 14.698zm-29.79 18.222H34.504c-4.306 4.329-11.283 11.34-11.363 11.34h11.757L23.146 79.536l26.45-23.52h-8.818l8.399-8.398z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default SvgCloudbolt

app/components/Icon/Contacts.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgContacts = props => (
+  <svg viewBox="0 0 20 15" width="1em" height="1em" {...props}>
+    <g
+      transform="translate(1 1)"
+      stroke="currentColor"
+      strokeWidth={0.8}
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M13.5 14v-1.458c0-1.611-1.511-2.917-3.375-2.917h-6.75C1.511 9.625 0 10.931 0 12.542V14" />
+      <ellipse cx={6.75} cy={3.063} rx={3.15} ry={3.063} />
+      <path d="M18 14v-1.49c-.001-1.36-1.112-2.545-2.7-2.885M12.6 0c1.589.358 2.7 1.619 2.7 3.063 0 1.443-1.111 2.704-2.7 3.062" />
+    </g>
+  </svg>
+)
+
+export default SvgContacts

app/components/Icon/Copy.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgCopy = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-copy"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <rect x={9} y={9} width={13} height={13} rx={2} ry={2} />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+)
+
+export default SvgCopy

app/components/Icon/Eye.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgEye = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-eye"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx={12} cy={12} r={3} />
+  </svg>
+)
+
+export default SvgEye

app/components/Icon/Globe.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgGlobe = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-globe"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <circle cx={12} cy={12} r={10} />
+    <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+  </svg>
+)
+
+export default SvgGlobe

app/components/Icon/Hand.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const SvgHand = props => (
+  <svg viewBox="0 0 32 14" width="1em" height="1em" {...props}>
+    <g stroke="currentColor" strokeWidth={0.75} fill="none" fillRule="evenodd">
+      <path d="M7 2.078c4.025-.372 7.34.589 9.943 2.882h4.623c2.038 0 1.782 3.04 0 3.04h-7.134M3.11 10.925H7V1H1c.208 5.035.966 8.368 2.272 10" />
+      <path d="M7 9.843C12.434 11.948 16.079 13 17.933 13c2.782 0 10.816-4.844 12.351-5.842C31.82 6.159 30.524 5 29.738 5c-.525 0-2.798.752-6.818 2.257" />
+    </g>
+  </svg>
+)
+
+export default SvgHand

app/components/Icon/Help.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const SvgHelp = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-life-buoy"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <circle cx={12} cy={12} r={10} />
+    <circle cx={12} cy={12} r={4} />
+    <path d="M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M14.83 9.17l4.24-4.24M14.83 9.17l3.53-3.53M4.93 19.07l4.24-4.24" />
+  </svg>
+)
+
+export default SvgHelp

app/components/Icon/Help2.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgHelp2 = props => (
+  <svg viewBox="0 0 18 18" width="1em" height="1em" {...props}>
+    <g
+      transform="translate(1 1)"
+      stroke="currentColor"
+      strokeWidth={0.8}
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx={8} cy={8} r={8} />
+      <circle cx={8} cy={8} r={3.2} />
+      <path d="M2.4 2.4l3.392 3.392M10.4 10.4l3.392 3.392M10.4 5.792L13.792 2.4M10.4 6.024L13.224 3.2M2.4 13.792L5.792 10.4" />
+    </g>
+  </svg>
+)
+
+export default SvgHelp2

app/components/Icon/IconPlus.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const SvgIconPlus = props => (
+  <svg viewBox="0 0 18 18" width="1em" height="1em" {...props}>
+    <g fill="none" fillRule="evenodd" stroke="currentColor" transform="translate(1 1)">
+      <path d="M8.09 5v6M5 8.09h6" strokeLinecap="round" strokeLinejoin="round" />
+      <circle cx={8} cy={8} r={8} />
+    </g>
+  </svg>
+)
+
+export default SvgIconPlus

app/components/Icon/Litecoin.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const SvgLitecoin = props => (
+  <svg fill="currentColor" viewBox="0 0 40 40" data-icon="ltc" width="1em" height="1em" {...props}>
+    <path d="M12.29 28.04l1.29-5.52-1.58.67.63-2.85 1.64-.68L16.52 10h5.23l-1.52 7.14 2.09-.74-.58 2.7-2.05.8-.9 4.34h8.1l-.99 3.8z" />
+  </svg>
+)
+
+export default SvgLitecoin

app/components/Icon/LtcLogo.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const SvgLtcLogo = props => (
+  <svg viewBox="0.847 0.876 329.254 329.256" width="1em" height="1em" {...props}>
+    <path
+      d="M330.102 165.503c0 90.922-73.705 164.629-164.626 164.629C74.554 330.132.848 256.425.848 165.503.848 74.582 74.554.876 165.476.876c90.92 0 164.626 73.706 164.626 164.627"
+      fill="#bebebe"
+    />
+    <path
+      d="M295.15 165.505c0 71.613-58.057 129.675-129.674 129.675-71.616 0-129.677-58.062-129.677-129.675 0-71.619 58.061-129.677 129.677-129.677 71.618 0 129.674 58.057 129.674 129.677"
+      fill="#bebebe"
+    />
+    <path
+      d="M155.854 209.482l10.693-40.264 25.316-9.249 6.297-23.663-.215-.587-24.92 9.104 17.955-67.608h-50.921l-23.481 88.23-19.605 7.162-6.478 24.395 19.59-7.156-13.839 51.998h135.521l8.688-32.362h-84.601"
+      fill="#fff"
+    />
+  </svg>
+)
+
+export default SvgLtcLogo

app/components/Icon/Network.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const SvgNetwork = props => (
+  <svg viewBox="0 0 18 18" width="1em" height="1em" {...props}>
+    <g
+      transform="translate(1 1)"
+      stroke="currentColor"
+      strokeWidth={0.8}
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx={8} cy={8} r={8} />
+      <path d="M0 8h16M8 0c1.876 2.19 2.942 5.034 3 8-.058 2.966-1.124 5.81-3 8-1.876-2.19-2.942-5.034-3-8 .058-2.966 1.124-5.81 3-8z" />
+    </g>
+  </svg>
+)
+
+export default SvgNetwork

app/components/Icon/PaperPlane.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const SvgPaperPlane = props => (
+  <svg viewBox="0 0 22 22" width="1em" height="1em" {...props}>
+    <g
+      stroke="currentColor"
+      strokeWidth={0.75}
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M20.5 1.5l-11 11M21 1l-7.35 21-4.2-9.45L0 8.35z" />
+    </g>
+  </svg>
+)
+
+export default SvgPaperPlane

app/components/Icon/Peers.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgPeers = props => (
+  <svg viewBox="0 0 24 19" width="1em" height="1em" {...props}>
+    <g
+      transform="translate(1 1)"
+      stroke="currentColor"
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      opacity={0.7}
+      strokeLinejoin="round"
+    >
+      <path d="M16 18v-2a4 4 0 0 0-4-4H4a4 4 0 0 0-4 4v2" />
+      <circle cx={8} cy={4} r={4} />
+      <path d="M22 18v-2a4 4 0 0 0-3-3.87M15 .13a4 4 0 0 1 0 7.75" />
+    </g>
+  </svg>
+)
+
+export default SvgPeers

app/components/Icon/Plus.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const SvgPlus = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-plus"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+)
+
+export default SvgPlus

app/components/Icon/PlusCircle.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgPlusCircle = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-plus-circle"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <circle cx={12} cy={12} r={10} />
+    <path d="M12 8v8M8 12h8" />
+  </svg>
+)
+
+export default SvgPlusCircle

app/components/Icon/Qrcode.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const SvgQrcode = props => (
+  <svg viewBox="0 0 16 16" width="1em" height="1em" {...props}>
+    <g fill="currentColor" fillRule="nonzero" opacity={0.5}>
+      <path d="M.4 4.809a.4.4 0 0 1-.4-.4V.4A.4.4 0 0 1 .4 0h4.009a.4.4 0 1 1 0 .8H.8v3.609a.4.4 0 0 1-.4.4zM15.6 16h-4.01a.4.4 0 1 1 0-.8h3.61v-3.61a.4.4 0 1 1 .8 0v4.01a.4.4 0 0 1-.4.4zM15.6 4.809a.4.4 0 0 1-.4-.4V.8h-3.61a.4.4 0 1 1 0-.8h4.01a.4.4 0 0 1 .4.4v4.009a.4.4 0 0 1-.4.4zM4.409 16H.4a.4.4 0 0 1-.4-.4v-4.01a.4.4 0 1 1 .8 0v3.61h3.609a.4.4 0 1 1 0 .8zM11.588 11.98H7.6a.393.393 0 0 1-.393-.393V7.994H3.612a.393.393 0 1 1 0-.786H7.6c.217 0 .393.176.393.393v3.595h3.595a.393.393 0 1 1 0 .785z" />
+      <path d="M11.588 9.879a.393.393 0 0 1-.393-.393V7.993H9.879v1.493a.393.393 0 1 1-.786 0V7.6c0-.217.176-.393.393-.393h2.101c.218 0 .393.176.393.393v1.886a.393.393 0 0 1-.393.393zM5.714 6.107H3.612a.393.393 0 0 1-.392-.393V3.612c0-.217.175-.392.392-.392h2.102c.217 0 .393.175.393.392v2.102a.393.393 0 0 1-.393.393zm-1.709-.786h1.316V4.005H4.005v1.316zM11.588 6.107H9.486a.393.393 0 0 1-.393-.393V3.612c0-.217.176-.392.393-.392h2.101c.218 0 .393.175.393.392v2.102a.393.393 0 0 1-.393.393zm-1.71-.786h1.317V4.005H9.879v1.316zM5.714 11.98H3.612a.393.393 0 0 1-.392-.393V9.486c0-.217.175-.393.392-.393h2.102c.217 0 .393.176.393.393v2.101a.393.393 0 0 1-.393.393zm-1.709-.785h1.316V9.879H4.005v1.316zM7.6 6.107a.393.393 0 0 1-.393-.393V3.612a.393.393 0 1 1 .786 0v2.102a.393.393 0 0 1-.393.393z" />
+    </g>
+  </svg>
+)
+
+export default SvgQrcode

app/components/Icon/Search.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgSearch = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-search"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <circle cx={10.5} cy={10.5} r={7.5} />
+    <path d="M21 21l-5.2-5.2" />
+  </svg>
+)
+
+export default SvgSearch

app/components/Icon/Settings.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const SvgSettings = props => (
+  <svg viewBox="0 0 24 24" width="1em" height="1em" {...props}>
+    <g
+      transform="translate(1 1)"
+      stroke="currentColor"
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      opacity={0.7}
+      strokeLinejoin="round"
+    >
+      <circle cx={11} cy={11} r={3} />
+      <path d="M18.4 14a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V20a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 8 18.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 3.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H8a1.65 1.65 0 0 0 1-1.51V2a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V8c.26.604.852.997 1.51 1H20a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </g>
+  </svg>
+)
+
+export default SvgSettings

app/components/Icon/SkinnyBitcoin.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const SvgSkinnyBitcoin = props => (
+  <svg viewBox="0 0 25 42" width="1em" height="1em" {...props}>
+    <g fillRule="nonzero" fill="currentColor">
+      <path d="M16.667 38H.833A.842.842 0 0 1 0 37.15V4.85C0 4.38.373 4 .833 4h12.5c4.595 0 8.334 3.813 8.334 8.5 0 2.86-1.39 5.392-3.519 6.934C22.038 20.148 25 23.628 25 27.8v1.7c0 4.687-3.738 8.5-8.333 8.5zm-15-1.7h15c3.676 0 6.666-3.05 6.666-6.8v-1.7c0-3.75-2.99-6.8-6.666-6.8h-15v15.3zm0-17h11.666C17.01 19.3 20 16.25 20 12.5s-2.99-6.8-6.667-6.8H1.667v13.6z" />
+      <path d="M6 5c-.552 0-1-.373-1-.833V.833C5 .373 5.448 0 6 0s1 .373 1 .833v3.334C7 4.627 6.554 5 6 5zM12 5c-.552 0-1-.373-1-.833V.833c0-.46.448-.833 1-.833s1 .373 1 .833v3.334c0 .46-.446.833-1 .833zM6 42c-.552 0-1-.373-1-.833v-3.334c0-.46.448-.833 1-.833s1 .373 1 .833v3.334c0 .46-.446.833-1 .833zM12 42c-.552 0-1-.373-1-.833v-3.334c0-.46.448-.833 1-.833s1 .373 1 .833v3.334c0 .46-.446.833-1 .833z" />
+    </g>
+  </svg>
+)
+
+export default SvgSkinnyBitcoin

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 => <MdArrowBack {...props} />
+
+export default SystemIcon

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 => <MdArrowForward {...props} />
+
+export default SystemIcon

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 => <FaTimesCircle {...props} />
+
+export default SystemIcon

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 => <MdNavigateNext {...props} />
+
+export default SystemIcon

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 => <MdNavigateBefore {...props} />
+
+export default SystemIcon

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 => <FaCheckCircle {...props} />
+
+export default SystemIcon

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 => <FaExclamationCircle {...props} />
+
+export default SystemIcon

app/components/Icon/User.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgUser = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-user"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+    <circle cx={12} cy={7} r={4} />
+  </svg>
+)
+
+export default SvgUser

app/components/Icon/Wallet.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const SvgWallet = props => (
+  <svg viewBox="0 0 25 23" width="1em" height="1em" {...props}>
+    <g fill="currentColor" fillRule="evenodd">
+      <path d="M22.9 22.822H2.1c-1.158 0-2.1-.942-2.1-2.1V4.869c0-.21.129-.388.311-.463a1.755 1.755 0 0 1-.176-.343.5.5 0 0 1 .933-.36c.256.666 1.342.674 1.815.666H22.9c1.158 0 2.1.942 2.1 2.1v14.253c0 1.158-.942 2.1-2.1 2.1zM1 5.018v15.704c0 .606.494 1.1 1.1 1.1h20.8c.607 0 1.1-.494 1.1-1.1V6.469c0-.606-.493-1.1-1.1-1.1H2.901c-.402.02-1.232 0-1.901-.351z" />
+      <path d="M22.318 5.305a.5.5 0 0 1-.5-.5V1.829c0-.274-.099-.508-.28-.656-.181-.15-.428-.203-.695-.15L2.149 2.833C1.071 3.074 1 3.96.999 3.97l.001.75a.5.5 0 0 1-1 0v-.783c.039-.6.503-1.761 1.993-2.088L20.699.035A1.789 1.789 0 0 1 22.174.4c.409.338.644.859.644 1.429v2.976c0 .277-.223.5-.5.5M19.916 14.997a1.301 1.301 0 1 1 1.3-1.301c0 .717-.583 1.3-1.3 1.3zm0-1.6a.3.3 0 1 0-.001.598.3.3 0 0 0 .001-.598z" />
+      <path d="M24.5 17.6h-7.153a2.518 2.518 0 0 1-2.515-2.515v-2.776a2.518 2.518 0 0 1 2.515-2.516H24.5a.5.5 0 0 1 .5.5V17.1a.5.5 0 0 1-.5.5zm-7.153-6.807c-.835 0-1.515.68-1.515 1.516v2.776c0 .836.68 1.515 1.515 1.515H24v-5.807h-6.653z" />
+    </g>
+  </svg>
+)
+
+export default SvgWallet

app/components/Icon/Wallet2.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const SvgWallet2 = props => (
+  <svg viewBox="0 0 18 16" width="1em" height="1em" {...props}>
+    <g fill="currentColor" fillRule="evenodd">
+      <path d="M16.488 15.876H1.512C.678 15.876 0 15.22 0 14.415V3.387a.35.35 0 0 1 .224-.322 1.206 1.206 0 0 1-.127-.239.345.345 0 0 1 .207-.45.365.365 0 0 1 .465.2c.184.463.966.469 1.307.463h14.412c.834 0 1.512.655 1.512 1.46v9.916c0 .806-.678 1.46-1.512 1.46zM.72 3.49v10.924c0 .422.356.765.792.765h14.976a.78.78 0 0 0 .792-.765V4.5a.78.78 0 0 0-.792-.765h-14.4c-.289.014-.886 0-1.368-.244z" />
+      <path d="M16.069 3.69a.354.354 0 0 1-.36-.348v-2.07a.565.565 0 0 0-.202-.456.607.607 0 0 0-.5-.105l-13.46 1.26c-.776.167-.827.784-.828.79l.001.522a.354.354 0 0 1-.36.347.354.354 0 0 1-.36-.347v-.545c.028-.418.362-1.225 1.435-1.453L14.903.025c.368-.073.768.02 1.062.253.295.235.464.598.464.994v2.07c0 .193-.16.348-.36.348M14.34 10.432c-.517 0-.936-.406-.936-.905 0-.498.42-.903.936-.903s.936.405.936.903c0 .5-.42.905-.936.905zm0-1.113a.212.212 0 0 0-.216.208c0 .116.096.21.216.21a.213.213 0 0 0 .216-.21.212.212 0 0 0-.216-.208z" />
+      <path d="M17.64 12.243h-5.15c-.999 0-1.811-.784-1.811-1.75v-1.93c0-.965.812-1.75 1.81-1.75h5.151c.199 0 .36.155.36.347v4.735a.354.354 0 0 1-.36.348zm-5.15-4.735c-.601 0-1.091.473-1.091 1.055v1.93c0 .582.49 1.055 1.09 1.055h4.791v-4.04h-4.79z" />
+    </g>
+  </svg>
+)
+
+export default SvgWallet2

app/components/Icon/X.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const SvgX = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-x"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+)
+
+export default SvgX

app/components/Icon/Zap.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const SvgZap = props => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-zap"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+  </svg>
+)
+
+export default SvgZap

app/components/Icon/ZapLogo.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgZapLogo = props => (
+  <svg viewBox="0 0 60 21" width="1em" height="1em" {...props}>
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M29.533 15.014h6.865V16h-8.31v-.86l6.406-8.7h-6.21V5.433h7.685v.869l-6.436 8.71zM46.158 16c-.117-.332-.192-.824-.224-1.475-.41.534-.933.946-1.568 1.236a4.8 4.8 0 0 1-2.016.434c-1.016 0-1.838-.283-2.466-.85-.628-.566-.943-1.282-.943-2.148 0-1.028.428-1.842 1.285-2.441.856-.6 2.049-.899 3.579-.899h2.119v-1.2c0-.756-.233-1.35-.698-1.783-.466-.433-1.145-.65-2.037-.65-.813 0-1.487.209-2.021.626-.534.416-.8.918-.8 1.504l-1.173-.01c0-.84.39-1.568 1.172-2.183.781-.615 1.742-.923 2.881-.923 1.178 0 2.108.295 2.788.884.68.59 1.03 1.411 1.05 2.466v5c0 1.022.107 1.787.322 2.295V16h-1.25zm-3.672-.84c.782 0 1.48-.189 2.095-.566a3.333 3.333 0 0 0 1.343-1.514v-2.324h-2.09c-1.165.013-2.077.226-2.734.64-.658.413-.987.98-.987 1.704 0 .592.22 1.084.66 1.474.439.39 1.01.586 1.713.586zm17.211-4.336c0 1.647-.364 2.954-1.093 3.921-.73.967-1.706 1.45-2.93 1.45-1.445 0-2.552-.507-3.32-1.523v5.39H51.19V5.434h1.084l.059 1.494c.762-1.127 1.865-1.69 3.31-1.69 1.264 0 2.255.479 2.974 1.436.72.957 1.08 2.285 1.08 3.984v.166zm-1.172-.205c0-1.348-.276-2.412-.83-3.193-.553-.781-1.325-1.172-2.314-1.172-.716 0-1.332.172-1.846.517-.514.346-.908.847-1.181 1.504v5.069c.28.605.68 1.067 1.2 1.386.522.32 1.137.479 1.846.479.983 0 1.75-.392 2.3-1.177.55-.784.825-1.922.825-3.413z"
+        fill="currentColor"
+      />
+      <g strokeLinecap="round" strokeLinejoin="round" strokeWidth={0.77}>
+        <path
+          d="M15.042 13.286c1.993-.395 3.355-2.2 3.15-4.174-.204-1.975-1.908-3.478-3.942-3.476h-.998c-.722-2.729-3.244-4.635-6.132-4.635C4.233 1 1.71 2.907.988 5.636c-.722 2.73.539 5.59 3.065 6.955"
+          stroke="currentColor"
+        />
+        <path stroke="#F5B300" d="M10.292 8.727l-3.167 4.637h4.75L8.708 18" />
+      </g>
+    </g>
+  </svg>
+)
+
+export default SvgZapLogo

app/components/Icon/ZapLogoBlack.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgZapLogoBlack = props => (
+  <svg viewBox="0 0 60 21" width="1em" height="1em" {...props}>
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M29.533 15.014h6.865V16h-8.31v-.86l6.406-8.7h-6.21V5.433h7.685v.869l-6.436 8.71zM46.158 16c-.117-.332-.192-.824-.224-1.475-.41.534-.933.946-1.568 1.236a4.8 4.8 0 0 1-2.016.434c-1.016 0-1.838-.283-2.466-.85-.628-.566-.943-1.282-.943-2.148 0-1.028.428-1.842 1.285-2.441.856-.6 2.049-.899 3.579-.899h2.119v-1.2c0-.756-.233-1.35-.698-1.783-.466-.433-1.145-.65-2.037-.65-.813 0-1.487.209-2.021.626-.534.416-.8.918-.8 1.504l-1.173-.01c0-.84.39-1.568 1.172-2.183.781-.615 1.742-.923 2.881-.923 1.178 0 2.108.295 2.788.884.68.59 1.03 1.411 1.05 2.466v5c0 1.022.107 1.787.322 2.295V16h-1.25zm-3.672-.84c.782 0 1.48-.189 2.095-.566a3.333 3.333 0 0 0 1.343-1.514v-2.324h-2.09c-1.165.013-2.077.226-2.734.64-.658.413-.987.98-.987 1.704 0 .592.22 1.084.66 1.474.439.39 1.01.586 1.713.586zm17.211-4.336c0 1.647-.364 2.954-1.093 3.921-.73.967-1.706 1.45-2.93 1.45-1.445 0-2.552-.507-3.32-1.523v5.39H51.19V5.434h1.084l.059 1.494c.762-1.127 1.865-1.69 3.31-1.69 1.264 0 2.255.479 2.974 1.436.72.957 1.08 2.285 1.08 3.984v.166zm-1.172-.205c0-1.348-.276-2.412-.83-3.193-.553-.781-1.325-1.172-2.314-1.172-.716 0-1.332.172-1.846.517-.514.346-.908.847-1.181 1.504v5.069c.28.605.68 1.067 1.2 1.386.522.32 1.137.479 1.846.479.983 0 1.75-.392 2.3-1.177.55-.784.825-1.922.825-3.413z"
+        fill="#313340"
+      />
+      <g strokeLinecap="round" strokeLinejoin="round" strokeWidth={0.77}>
+        <path
+          d="M15.042 13.286c1.993-.395 3.355-2.2 3.15-4.174-.204-1.975-1.908-3.478-3.942-3.476h-.998c-.722-2.729-3.244-4.635-6.132-4.635C4.233 1 1.71 2.907.988 5.636c-.722 2.73.539 5.59 3.065 6.955"
+          stroke="#313340"
+        />
+        <path stroke="#F5B300" d="M10.292 8.727l-3.167 4.637h4.75L8.708 18" />
+      </g>
+    </g>
+  </svg>
+)
+
+export default SvgZapLogoBlack

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'

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'
 

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'

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'

app/icons/big-arrow-right.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 9 4">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M1 2h6M6 4l2-2-2-2"/>
+    </g>
+</svg>

app/icons/check-animated.svg

@@ -0,0 +1,4 @@
+<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/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path><polyline points="23 3 12 14 9 11"></polyline></svg>

app/icons/cloud-lightning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud-lightning"><path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9"></path><polyline points="13 11 9 17 15 17 11 23"></polyline></svg>

app/icons/cloud_lightning.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cloud-lightning"><path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9"></path><polyline points="13 11 9 17 15 17 11 23"></polyline></svg>

app/icons/icon-plus.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 18 18">
+    <g fill="none" fill-rule="evenodd" stroke="#FD9800" transform="translate(1 1)">
+        <g stroke-linecap="round" stroke-linejoin="round">
+            <path d="M8.09 5v6M5 8.09h6"/>
+        </g>
+        <circle cx="8" cy="8" r="8"/>
+    </g>
+</svg>

app/icons/ltc-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0.847 0.876 329.254 329.256"><title>Litecoin</title><path d="M330.102 165.503c0 90.922-73.705 164.629-164.626 164.629C74.554 330.132.848 256.425.848 165.503.848 74.582 74.554.876 165.476.876c90.92 0 164.626 73.706 164.626 164.627" fill="#bebebe"/><path d="M295.15 165.505c0 71.613-58.057 129.675-129.674 129.675-71.616 0-129.677-58.062-129.677-129.675 0-71.619 58.061-129.677 129.677-129.677 71.618 0 129.674 58.057 129.674 129.677" fill="#bebebe"/><path d="M155.854 209.482l10.693-40.264 25.316-9.249 6.297-23.663-.215-.587-24.92 9.104 17.955-67.608h-50.921l-23.481 88.23-19.605 7.162-6.478 24.395 19.59-7.156-13.839 51.998h135.521l8.688-32.362h-84.601" fill="#fff"/></svg>

app/icons/check_circle.svg → app/icons/plus-circle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path><polyline points="23 3 12 14 9 11"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>

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",

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, () => (
+    <React.Fragment>
+      {iconSizes.map(size => (
+        <Flex key={`${name}-${size}`} alignItems="center" mb={3}>
+          <Box mr={2}>
+            {size} x {size}:
+          </Box>
+          <Icon width={size} height={size} />
+        </Flex>
+      ))}
+    </React.Fragment>
+  ))
+})
+
+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, () => (
+    <React.Fragment>
+      {iconSizes.map(size => (
+        <Flex key={`${name}-${size}`} alignItems="center" mb={3}>
+          <Box mr={2}>
+            {size} x {size}:
+          </Box>
+          <Icon width={size} height={size} />
+        </Flex>
+      ))}
+    </React.Fragment>
+  ))
+})

test/unit/components/AnimatedCheckmark.spec.js

@@ -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(<AnimatedCheckmark />)
-      expect(el.find(Isvg).props().src).toContain(checkmarkIcon)
-    })
-  })
-})

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() })