refactor icons to move react element into constants

7 years ago · 01bcff25fe
43 changed files with 408 additions and 232 deletions
--- a/.gitignore
+++ b/.gitignore
@ -7,4 +7,5 @@
 /static/fonts/museosans/
 /storybook-static/
 thumbs.db
-.vscode
+.vscode
+jsconfig.json
--- a/src/icons/Activity.js
+++ b/src/icons/Activity.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M11.488 8.063a.75.75 0 0 1 .712-.513H15a.75.75 0 1 1 0 1.5h-2.26l-1.928 5.787c-.228.684-1.196.684-1.424 0L5.9 4.372 4.512 8.537a.75.75 0 0 1-.712.513H1a.75.75 0 0 1 0-1.5h2.26l1.928-5.787c.228-.684 1.196-.684 1.424 0L10.1 12.228l1.388-4.165z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M11.488 8.063a.75.75 0 0 1 .712-.513H15a.75.75 0 1 1 0 1.5h-2.26l-1.928 5.787c-.228.684-1.196.684-1.424 0L5.9 4.372 4.512 8.537a.75.75 0 0 1-.712.513H1a.75.75 0 0 1 0-1.5h2.26l1.928-5.787c.228-.684 1.196-.684 1.424 0L10.1 12.228l1.388-4.165z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/AngleDown.js
+++ b/src/icons/AngleDown.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M7.70123023 10.2169906L3.62390158 6.53574061c-.16520211-.146875-.16520211-.384375 0-.53125l.24956063-.221875c.16520211-.146875.43233744-.146875.59753955 0L8 8.97949061l3.5289982-3.19375c.1652022-.146875.4323375-.146875.5975396 0l.2495606.221875c.1652021.146875.1652021.384375 0 .53125L8.29876977 10.2201156c-.16520211.14375-.43233743.14375-.59753954-.003125z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M7.70123023 10.2169906L3.62390158 6.53574061c-.16520211-.146875-.16520211-.384375 0-.53125l.24956063-.221875c.16520211-.146875.43233744-.146875.59753955 0L8 8.97949061l3.5289982-3.19375c.1652022-.146875.4323375-.146875.5975396 0l.2495606.221875c.1652021.146875.1652021.384375 0 .53125L8.29876977 10.2201156c-.16520211.14375-.43233743.14375-.59753954-.003125z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/AngleLeft.js
+++ b/src/icons/AngleLeft.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M5.78300939 7.734375l3.68125-3.625c.146875-.146875.384375-.146875.53125 0l.22187501.221875c.146875.146875.146875.384375 0 .53125L7.02050939 8l3.19375001 3.1375c.146875.146875.146875.384375 0 .53125l-.22187501.221875c-.146875.146875-.384375.146875-.53125 0l-3.68125-3.625c-.14375-.146875-.14375-.384375.003125-.53125z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M5.78300939 7.734375l3.68125-3.625c.146875-.146875.384375-.146875.53125 0l.22187501.221875c.146875.146875.146875.384375 0 .53125L7.02050939 8l3.19375001 3.1375c.146875.146875.146875.384375 0 .53125l-.22187501.221875c-.146875.146875-.384375.146875-.53125 0l-3.68125-3.625c-.14375-.146875-.14375-.384375.003125-.53125z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/ArrowDown.js
+++ b/src/icons/ArrowDown.js
@ -2,12 +2,16 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    transform="matrix(1, 0, 0, -1, 0, 16)"
+    d="M7.25 3.81L4.53 6.53a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1-1.06 1.06L8.75 3.81V14a.75.75 0 1 1-1.5 0V3.81z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      transform="matrix(1, 0, 0, -1, 0, 16)"
-      d="M7.25 3.81L4.53 6.53a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1-1.06 1.06L8.75 3.81V14a.75.75 0 1 1-1.5 0V3.81z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/ArrowUp.js
+++ b/src/icons/ArrowUp.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M7.25 3.81L4.53 6.53a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1-1.06 1.06L8.75 3.81V14a.75.75 0 1 1-1.5 0V3.81z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M7.25 3.81L4.53 6.53a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1-1.06 1.06L8.75 3.81V14a.75.75 0 1 1-1.5 0V3.81z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Bottom.js
+++ b/src/icons/Bottom.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M11.82 5H4.149c-1.46 0-2.2 1.616-1.161 2.56l3.834 3.5c.641.584 1.683.584 2.327 0l3.838-3.5c1.028-.941.298-2.56-1.165-2.56z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M11.82 5H4.149c-1.46 0-2.2 1.616-1.161 2.56l3.834 3.5c.641.584 1.683.584 2.327 0l3.838-3.5c1.028-.941.298-2.56-1.165-2.56z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Check.js
+++ b/src/icons/Check.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M13.62 2.608l-8.22 8.22-3.02-3.02a.375.375 0 0 0-.53 0l-.884.884a.375.375 0 0 0 0 .53l4.169 4.17a.375.375 0 0 0 .53 0l9.37-9.37a.375.375 0 0 0 0-.53l-.884-.884a.375.375 0 0 0-.53 0z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M13.62 2.608l-8.22 8.22-3.02-3.02a.375.375 0 0 0-.53 0l-.884.884a.375.375 0 0 0 0 .53l4.169 4.17a.375.375 0 0 0 .53 0l9.37-9.37a.375.375 0 0 0 0-.53l-.884-.884a.375.375 0 0 0-.53 0z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/CheckCircle.js
+++ b/src/icons/CheckCircle.js
@ -2,11 +2,14 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M12 .375C5.58.375.375 5.58.375 12S5.58 23.625 12 23.625 23.625 18.42 23.625 12 18.42.375 12 .375zm0 21.75C6.438 22.125 1.875 17.622 1.875 12 1.875 6.438 6.378 1.875 12 1.875c5.562 0 10.125 4.503 10.125 10.125 0 5.562-4.503 10.125-10.125 10.125zm6.639-12.889l-8.46 8.392a.562.562 0 0 1-.796-.003l-4.025-4.058a.562.562 0 0 1 .003-.795l.4-.397a.562.562 0 0 1 .795.004l3.233 3.259 7.661-7.6a.562.562 0 0 1 .796.003l.396.4a.562.562 0 0 1-.003.795z"
+  />
+)
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 24 24" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M12 .375C5.58.375.375 5.58.375 12S5.58 23.625 12 23.625 23.625 18.42 23.625 12 18.42.375 12 .375zm0 21.75C6.438 22.125 1.875 17.622 1.875 12 1.875 6.438 6.378 1.875 12 1.875c5.562 0 10.125 4.503 10.125 10.125 0 5.562-4.503 10.125-10.125 10.125zm6.639-12.889l-8.46 8.392a.562.562 0 0 1-.796-.003l-4.025-4.058a.562.562 0 0 1 .003-.795l.4-.397a.562.562 0 0 1 .795.004l3.233 3.259 7.661-7.6a.562.562 0 0 1 .796.003l.396.4a.562.562 0 0 1-.003.795z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/ChevronRight.js
+++ b/src/icons/ChevronRight.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M10.869 8.266L6.28 12.89a.375.375 0 0 1-.531 0l-.619-.62a.375.375 0 0 1 0-.53L8.834 8 5.131 4.26a.375.375 0 0 1 0-.532l.619-.619a.375.375 0 0 1 .531 0l4.588 4.625a.375.375 0 0 1 0 .532z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M10.869 8.266L6.28 12.89a.375.375 0 0 1-.531 0l-.619-.62a.375.375 0 0 1 0-.53L8.834 8 5.131 4.26a.375.375 0 0 1 0-.532l.619-.619a.375.375 0 0 1 .531 0l4.588 4.625a.375.375 0 0 1 0 .532z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Clock.js
+++ b/src/icons/Clock.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M8 .583a7.417 7.417 0 1 1 0 14.834A7.417 7.417 0 0 1 8 .583zm0 1.5a5.917 5.917 0 1 0 0 11.834A5.917 5.917 0 0 0 8 2.083zm.75 5.606l1.78 1.78a.75.75 0 0 1-1.06 1.061l-2-2A.75.75 0 0 1 7.25 8V4a.75.75 0 0 1 1.5 0v3.69z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M8 .583a7.417 7.417 0 1 1 0 14.834A7.417 7.417 0 0 1 8 .583zm0 1.5a5.917 5.917 0 1 0 0 11.834A5.917 5.917 0 0 0 8 2.083zm.75 5.606l1.78 1.78a.75.75 0 0 1-1.06 1.061l-2-2A.75.75 0 0 1 7.25 8V4a.75.75 0 0 1 1.5 0v3.69z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Controls.js
+++ b/src/icons/Controls.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M3.417 14a.75.75 0 1 1-1.5 0V9.333a.75.75 0 1 1 1.5 0V14zm0-7.333a.75.75 0 0 1-1.5 0V2a.75.75 0 1 1 1.5 0v4.667zM8.75 14a.75.75 0 1 1-1.5 0V8a.75.75 0 0 1 1.5 0v6zm0-8.667a.75.75 0 1 1-1.5 0V2a.75.75 0 0 1 1.5 0v3.333zM14.083 14a.75.75 0 1 1-1.5 0v-3.333a.75.75 0 0 1 1.5 0V14zm0-6a.75.75 0 1 1-1.5 0V2a.75.75 0 0 1 1.5 0v6zM.667 10.083a.75.75 0 1 1 0-1.5h4a.75.75 0 0 1 0 1.5h-4zm5.333-4a.75.75 0 1 1 0-1.5h4a.75.75 0 1 1 0 1.5H6zm5.333 5.334a.75.75 0 0 1 0-1.5h4a.75.75 0 1 1 0 1.5h-4z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M3.417 14a.75.75 0 1 1-1.5 0V9.333a.75.75 0 1 1 1.5 0V14zm0-7.333a.75.75 0 0 1-1.5 0V2a.75.75 0 1 1 1.5 0v4.667zM8.75 14a.75.75 0 1 1-1.5 0V8a.75.75 0 0 1 1.5 0v6zm0-8.667a.75.75 0 1 1-1.5 0V2a.75.75 0 0 1 1.5 0v3.333zM14.083 14a.75.75 0 1 1-1.5 0v-3.333a.75.75 0 0 1 1.5 0V14zm0-6a.75.75 0 1 1-1.5 0V2a.75.75 0 0 1 1.5 0v6zM.667 10.083a.75.75 0 1 1 0-1.5h4a.75.75 0 0 1 0 1.5h-4zm5.333-4a.75.75 0 1 1 0-1.5h4a.75.75 0 1 1 0 1.5H6zm5.333 5.334a.75.75 0 0 1 0-1.5h4a.75.75 0 1 1 0 1.5h-4z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Copy.js
+++ b/src/icons/Copy.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M8 6.75c-.69035594 0-1.25.55964406-1.25 1.25v4.6666667c0 .6903559.55964406 1.25 1.25 1.25h4.6666667c.6903559 0 1.25-.5596441 1.25-1.25V8c0-.69035594-.5596441-1.25-1.25-1.25H8zm0-1.5h4.6666667c1.518783 0 2.75 1.23121694 2.75 2.75v4.6666667c0 1.518783-1.231217 2.75-2.75 2.75H8c-1.51878306 0-2.75-1.231217-2.75-2.75V8c0-1.51878306 1.23121694-2.75 2.75-2.75zm-4.66666667 4c.41421357 0 .75.33578644.75.75 0 .4142136-.33578643.75-.75.75h-.66666666c-1.15059323 0-2.08333334-.9327401-2.08333334-2.08333333v-6c0-1.15059323.93274011-2.08333334 2.08333334-2.08333334h6C9.8172599.58333333 10.75 1.51607344 10.75 2.66666667v.66666666c0 .41421357-.3357864.75-.75.75-.41421356 0-.75-.33578643-.75-.75v-.66666666c0-.32216611-.26116723-.58333334-.58333333-.58333334h-6c-.32216611 0-.58333334.26116723-.58333334.58333334v6c0 .3221661.26116723.58333333.58333334.58333333h.66666666z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M8 6.75c-.69035594 0-1.25.55964406-1.25 1.25v4.6666667c0 .6903559.55964406 1.25 1.25 1.25h4.6666667c.6903559 0 1.25-.5596441 1.25-1.25V8c0-.69035594-.5596441-1.25-1.25-1.25H8zm0-1.5h4.6666667c1.518783 0 2.75 1.23121694 2.75 2.75v4.6666667c0 1.518783-1.231217 2.75-2.75 2.75H8c-1.51878306 0-2.75-1.231217-2.75-2.75V8c0-1.51878306 1.23121694-2.75 2.75-2.75zm-4.66666667 4c.41421357 0 .75.33578644.75.75 0 .4142136-.33578643.75-.75.75h-.66666666c-1.15059323 0-2.08333334-.9327401-2.08333334-2.08333333v-6c0-1.15059323.93274011-2.08333334 2.08333334-2.08333334h6C9.8172599.58333333 10.75 1.51607344 10.75 2.66666667v.66666666c0 .41421357-.3357864.75-.75.75-.41421356 0-.75-.33578643-.75-.75v-.66666666c0-.32216611-.26116723-.58333334-.58333333-.58333334h-6c-.32216611 0-.58333334.26116723-.58333334.58333334v6c0 .3221661.26116723.58333333.58333334.58333333h.66666666z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Cross.js
+++ b/src/icons/Cross.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M9.2375 8l4.065625-4.065625c.146875-.146875.146875-.384375 0-.53125l-.70625-.70625c-.146875-.146875-.384375-.146875-.53125 0L8 6.7625 3.934375 2.696875C3.7875 2.55 3.55 2.55 3.403125 2.696875l-.70625.70625c-.146875.146875-.146875.384375 0 .53125L6.7625 8l-4.065625 4.065625c-.146875.146875-.146875.384375 0 .53125l.70625.70625c.146875.146875.384375.146875.53125 0L8 9.2375l4.065625 4.065625c.146875.146875.384375.146875.53125 0l.70625-.70625c.146875-.146875.146875-.384375 0-.53125L9.2375 8z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M9.2375 8l4.065625-4.065625c.146875-.146875.146875-.384375 0-.53125l-.70625-.70625c-.146875-.146875-.384375-.146875-.53125 0L8 6.7625 3.934375 2.696875C3.7875 2.55 3.55 2.55 3.403125 2.696875l-.70625.70625c-.146875.146875-.146875.384375 0 .53125L6.7625 8l-4.065625 4.065625c-.146875.146875-.146875.384375 0 .53125l.70625.70625c.146875.146875.384375.146875.53125 0L8 9.2375l4.065625 4.065625c.146875.146875.384375.146875.53125 0l.70625-.70625c.146875-.146875.146875-.384375 0-.53125L9.2375 8z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Currencies.js
+++ b/src/icons/Currencies.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M8 5.581c-3.865 0-7-1.083-7-2.79C1 1.083 4.135 0 8 0s7 1.083 7 2.79c0 1.708-3.135 2.791-7 2.791zm-7-2.79c0-.309.241-.558.538-.558.298 0 .539.25.539.558v10.418c0 .28.516.704 1.517 1.05 1.142.396 2.714.625 4.406.625 1.692 0 3.264-.23 4.406-.625 1.001-.346 1.517-.77 1.517-1.05V2.791c0-.309.241-.558.539-.558.297 0 .538.25.538.558v10.418C15 14.921 11.88 16 8 16s-7-1.08-7-2.79V2.79zM13.923 8c0-.308.241-.558.539-.558.297 0 .538.25.538.558 0 1.711-3.12 2.79-7 2.79S1 9.712 1 8c0-.308.241-.558.538-.558.298 0 .539.25.539.558 0 .28.516.704 1.517 1.05 1.142.395 2.714.624 4.406.624 1.692 0 3.264-.229 4.406-.624 1.001-.346 1.517-.77 1.517-1.05zM8 4.465c1.682 0 3.254-.23 4.399-.625 1.004-.347 1.524-.772 1.524-1.05 0-.277-.52-.702-1.524-1.048-1.145-.396-2.717-.626-4.399-.626s-3.254.23-4.399.626c-1.004.346-1.524.771-1.524 1.049 0 .277.52.702 1.524 1.049 1.145.395 2.717.625 4.399.625z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M8 5.581c-3.865 0-7-1.083-7-2.79C1 1.083 4.135 0 8 0s7 1.083 7 2.79c0 1.708-3.135 2.791-7 2.791zm-7-2.79c0-.309.241-.558.538-.558.298 0 .539.25.539.558v10.418c0 .28.516.704 1.517 1.05 1.142.396 2.714.625 4.406.625 1.692 0 3.264-.23 4.406-.625 1.001-.346 1.517-.77 1.517-1.05V2.791c0-.309.241-.558.539-.558.297 0 .538.25.538.558v10.418C15 14.921 11.88 16 8 16s-7-1.08-7-2.79V2.79zM13.923 8c0-.308.241-.558.539-.558.297 0 .538.25.538.558 0 1.711-3.12 2.79-7 2.79S1 9.712 1 8c0-.308.241-.558.538-.558.298 0 .539.25.539.558 0 .28.516.704 1.517 1.05 1.142.395 2.714.624 4.406.624 1.692 0 3.264-.229 4.406-.624 1.001-.346 1.517-.77 1.517-1.05zM8 4.465c1.682 0 3.254-.23 4.399-.625 1.004-.347 1.524-.772 1.524-1.05 0-.277-.52-.702-1.524-1.048-1.145-.396-2.717-.626-4.399-.626s-3.254.23-4.399.626c-1.004.346-1.524.771-1.524 1.049 0 .277.52.702 1.524 1.049 1.145.395 2.717.625 4.399.625z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Devices.js
+++ b/src/icons/Devices.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M13 2.5h-1.5v-1h-10v13h7V16h-7C.67157287 16 0 15.3284271 0 14.5v-13C0 .67157287.67157287 0 1.5 0h10c.8284271 0 1.5.67157287 1.5 1.5v1zm0 0h-1.5v-1h-10v13h7V16h-7C.67157287 16 0 15.3284271 0 14.5v-13C0 .67157287.67157287 0 1.5 0h10c.8284271 0 1.5.67157287 1.5 1.5v1zM12 4h1.9000001C15.059798 4 16 4.94020198 16 6.0999999V15c0 .5522847-.4477153 1-1 1h-4c-.5522847 0-1-.4477153-1-1V6c0-1.1045695.8954305-2 2-2zm-.5 10.5h3V6.0999999C14.5 5.76862911 14.2313709 5.5 13.9000001 5.5H12c-.2761424 0-.5.22385763-.5.5v8.5z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M13 2.5h-1.5v-1h-10v13h7V16h-7C.67157287 16 0 15.3284271 0 14.5v-13C0 .67157287.67157287 0 1.5 0h10c.8284271 0 1.5.67157287 1.5 1.5v1zm0 0h-1.5v-1h-10v13h7V16h-7C.67157287 16 0 15.3284271 0 14.5v-13C0 .67157287.67157287 0 1.5 0h10c.8284271 0 1.5.67157287 1.5 1.5v1zM12 4h1.9000001C15.059798 4 16 4.94020198 16 6.0999999V15c0 .5522847-.4477153 1-1 1h-4c-.5522847 0-1-.4477153-1-1V6c0-1.1045695.8954305-2 2-2zm-.5 10.5h3V6.0999999C14.5 5.76862911 14.2313709 5.5 13.9000001 5.5H12c-.2761424 0-.5.22385763-.5.5v8.5z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Display.js
+++ b/src/icons/Display.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M3.2 2.26c-.552 0-1 .471-1 1.051v6.547c0 .58.448 1.05 1 1.05h9.6c.552 0 1-.47 1-1.05V3.31c0-.58-.448-1.05-1-1.05H3.2zm5.4 9.909v1.57h1.96c.331 0 .6.283.6.63 0 .349-.269.631-.6.631H5.44c-.331 0-.6-.282-.6-.63 0-.348.269-.63.6-.63H7.4v-1.571H3.2c-1.215 0-2.2-1.035-2.2-2.311V3.31C1 2.035 1.985 1 3.2 1h9.6C14.015 1 15 2.035 15 3.311v6.547c0 1.276-.985 2.311-2.2 2.311H8.6z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" width={size} height={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M3.2 2.26c-.552 0-1 .471-1 1.051v6.547c0 .58.448 1.05 1 1.05h9.6c.552 0 1-.47 1-1.05V3.31c0-.58-.448-1.05-1-1.05H3.2zm5.4 9.909v1.57h1.96c.331 0 .6.283.6.63 0 .349-.269.631-.6.631H5.44c-.331 0-.6-.282-.6-.63 0-.348.269-.63.6-.63H7.4v-1.571H3.2c-1.215 0-2.2-1.035-2.2-2.311V3.31C1 2.035 1.985 1 3.2 1h9.6C14.015 1 15 2.035 15 3.311v6.547c0 1.276-.985 2.311-2.2 2.311H8.6z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Edit.js
+++ b/src/icons/Edit.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 576 512" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/ExclamationCircle.js
+++ b/src/icons/ExclamationCircle.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M8 .25C3.72009375.25.25 3.72134375.25 8c0 4.2811563 3.47009375 7.75 7.75 7.75 4.2799062 0 7.75-3.4688437 7.75-7.75C15.75 3.72134375 12.2799062.25 8 .25zm0 14c-3.454125 0-6.25-2.7947187-6.25-6.25 0-3.45296875 2.796-6.25 6.25-6.25 3.4528437 0 6.25 2.79596875 6.25 6.25 0 3.4540625-2.7947187 6.25-6.25 6.25zM9.3125 11c0 .7237187-.58878125 1.3125-1.3125 1.3125S6.6875 11.7237187 6.6875 11 7.27628125 9.6875 8 9.6875 9.3125 10.2762813 9.3125 11zM6.7696875 4.39371875l.2125 4.25C6.99215625 8.8433125 7.15690625 9 7.35671875 9h1.2865625c.1998125 0 .3645625-.1566875.37453125-.35628125l.2125-4.25C9.24103125 4.17953125 9.07025 4 8.85578125 4h-1.7115625c-.21446875 0-.38525.17953125-.37453125.39371875z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M8 .25C3.72009375.25.25 3.72134375.25 8c0 4.2811563 3.47009375 7.75 7.75 7.75 4.2799062 0 7.75-3.4688437 7.75-7.75C15.75 3.72134375 12.2799062.25 8 .25zm0 14c-3.454125 0-6.25-2.7947187-6.25-6.25 0-3.45296875 2.796-6.25 6.25-6.25 3.4528437 0 6.25 2.79596875 6.25 6.25 0 3.4540625-2.7947187 6.25-6.25 6.25zM9.3125 11c0 .7237187-.58878125 1.3125-1.3125 1.3125S6.6875 11.7237187 6.6875 11 7.27628125 9.6875 8 9.6875 9.3125 10.2762813 9.3125 11zM6.7696875 4.39371875l.2125 4.25C6.99215625 8.8433125 7.15690625 9 7.35671875 9h1.2865625c.1998125 0 .3645625-.1566875.37453125-.35628125l.2125-4.25C9.24103125 4.17953125 9.07025 4 8.85578125 4h-1.7115625c-.21446875 0-.38525.17953125-.37453125.39371875z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/ExclamationCircleThin.js
+++ b/src/icons/ExclamationCircleThin.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M12 1.875c5.56 0 10.125 4.504 10.125 10.125A10.122 10.122 0 0 1 12 22.125C6.41 22.125 1.875 17.599 1.875 12 1.875 6.412 6.403 1.875 12 1.875zm0-1.5C5.58.375.375 5.582.375 12 .375 18.422 5.58 23.625 12 23.625S23.625 18.422 23.625 12C23.625 5.582 18.42.375 12 .375zM11.461 6h1.078c.32 0 .575.266.562.586l-.329 7.875a.562.562 0 0 1-.562.539h-.42a.563.563 0 0 1-.563-.54L10.9 6.587A.563.563 0 0 1 11.461 6zM12 15.938a1.312 1.312 0 1 0 0 2.624 1.312 1.312 0 0 0 0-2.625z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 24 24" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M12 1.875c5.56 0 10.125 4.504 10.125 10.125A10.122 10.122 0 0 1 12 22.125C6.41 22.125 1.875 17.599 1.875 12 1.875 6.412 6.403 1.875 12 1.875zm0-1.5C5.58.375.375 5.582.375 12 .375 18.422 5.58 23.625 12 23.625S23.625 18.422 23.625 12C23.625 5.582 18.42.375 12 .375zM11.461 6h1.078c.32 0 .575.266.562.586l-.329 7.875a.562.562 0 0 1-.562.539h-.42a.563.563 0 0 1-.563-.54L10.9 6.587A.563.563 0 0 1 11.461 6zM12 15.938a1.312 1.312 0 1 0 0 2.624 1.312 1.312 0 0 0 0-2.625z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/ExternalLink.js
+++ b/src/icons/ExternalLink.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M12.19 2.75H10a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75v4a.75.75 0 1 1-1.5 0V3.81L7.197 9.865a.75.75 0 0 1-1.06-1.061l6.052-6.053zm-.94 5.917a.75.75 0 1 1 1.5 0v4c0 1.15-.933 2.083-2.083 2.083H3.333a2.083 2.083 0 0 1-2.083-2.083V5.333c0-1.15.933-2.083 2.083-2.083h4a.75.75 0 1 1 0 1.5h-4a.583.583 0 0 0-.583.583v7.334c0 .322.261.583.583.583h7.334a.583.583 0 0 0 .583-.583v-4z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M12.19 2.75H10a.75.75 0 0 1 0-1.5h4a.75.75 0 0 1 .75.75v4a.75.75 0 1 1-1.5 0V3.81L7.197 9.865a.75.75 0 0 1-1.06-1.061l6.052-6.053zm-.94 5.917a.75.75 0 1 1 1.5 0v4c0 1.15-.933 2.083-2.083 2.083H3.333a2.083 2.083 0 0 1-2.083-2.083V5.333c0-1.15.933-2.083 2.083-2.083h4a.75.75 0 1 1 0 1.5h-4a.583.583 0 0 0-.583.583v7.334c0 .322.261.583.583.583h7.334a.583.583 0 0 0 .583-.583v-4z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Eye.js
+++ b/src/icons/Eye.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M2.502 8.393c.335.494.731.99 1.184 1.45C4.953 11.128 6.399 11.888 8 11.888s3.047-.76 4.314-2.047A10.368 10.368 0 0 0 13.751 8a10.368 10.368 0 0 0-1.437-1.842C11.047 4.87 9.601 4.11 8 4.11s-3.047.76-4.314 2.047A10.368 10.368 0 0 0 2.249 8c.073.12.158.253.253.393zm-1.44-.641a8.35 8.35 0 0 1 .46-.748c.37-.547.809-1.094 1.313-1.606C4.302 3.907 6.028 3 8 3s3.698.907 5.165 2.398c.504.512.942 1.059 1.313 1.606.225.33.378.591.46.748a.532.532 0 0 1 0 .496 8.35 8.35 0 0 1-.46.748 11.477 11.477 0 0 1-1.313 1.606C11.698 12.093 9.972 13 8 13s-3.698-.907-5.165-2.398a11.477 11.477 0 0 1-1.313-1.606 8.35 8.35 0 0 1-.46-.748.532.532 0 0 1 0-.496zM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M2.502 8.393c.335.494.731.99 1.184 1.45C4.953 11.128 6.399 11.888 8 11.888s3.047-.76 4.314-2.047A10.368 10.368 0 0 0 13.751 8a10.368 10.368 0 0 0-1.437-1.842C11.047 4.87 9.601 4.11 8 4.11s-3.047.76-4.314 2.047A10.368 10.368 0 0 0 2.249 8c.073.12.158.253.253.393zm-1.44-.641a8.35 8.35 0 0 1 .46-.748c.37-.547.809-1.094 1.313-1.606C4.302 3.907 6.028 3 8 3s3.698.907 5.165 2.398c.504.512.942 1.059 1.313 1.606.225.33.378.591.46.748a.532.532 0 0 1 0 .496 8.35 8.35 0 0 1-.46.748 11.477 11.477 0 0 1-1.313 1.606C11.698 12.093 9.972 13 8 13s-3.698-.907-5.165-2.398a11.477 11.477 0 0 1-1.313-1.606 8.35 8.35 0 0 1-.46-.748.532.532 0 0 1 0-.496zM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Help.js
+++ b/src/icons/Help.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M3.3 4.007a6.167 6.167 0 1 0 .707-.707l2.135 2.135a3.167 3.167 0 1 1-.707.707L3.3 4.007zM8 15.167A7.167 7.167 0 1 1 8 .833a7.167 7.167 0 0 1 0 14.334zm0-5a2.167 2.167 0 1 0 0-4.334 2.167 2.167 0 0 0 0 4.334zm1.387-4.054c0-.128.048-.256.146-.353l2.353-2.354a.5.5 0 0 1 .708.708L10.24 6.467a.5.5 0 0 1-.707-.707l2.827-2.827a.5.5 0 0 1 .707.707L10.24 6.467a.5.5 0 0 1-.853-.354zm.146 4.127a.5.5 0 0 1 .707-.707l2.827 2.827a.5.5 0 1 1-.707.707L9.533 10.24zM3.64 13.067a.5.5 0 1 1-.707-.707L5.76 9.533a.5.5 0 1 1 .707.707L3.64 13.067z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M3.3 4.007a6.167 6.167 0 1 0 .707-.707l2.135 2.135a3.167 3.167 0 1 1-.707.707L3.3 4.007zM8 15.167A7.167 7.167 0 1 1 8 .833a7.167 7.167 0 0 1 0 14.334zm0-5a2.167 2.167 0 1 0 0-4.334 2.167 2.167 0 0 0 0 4.334zm1.387-4.054c0-.128.048-.256.146-.353l2.353-2.354a.5.5 0 0 1 .708.708L10.24 6.467a.5.5 0 0 1-.707-.707l2.827-2.827a.5.5 0 0 1 .707.707L10.24 6.467a.5.5 0 0 1-.853-.354zm.146 4.127a.5.5 0 0 1 .707-.707l2.827 2.827a.5.5 0 1 1-.707.707L9.533 10.24zM3.64 13.067a.5.5 0 1 1-.707-.707L5.76 9.533a.5.5 0 1 1 .707.707L3.64 13.067z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/InfoCircle.js
+++ b/src/icons/InfoCircle.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M8 .25a7.751 7.751 0 0 0 0 15.5A7.75 7.75 0 1 0 8 .25zm0 14A6.246 6.246 0 0 1 1.75 8 6.248 6.248 0 0 1 8 1.75 6.248 6.248 0 0 1 14.25 8 6.246 6.246 0 0 1 8 14.25zM8 3.687a1.312 1.312 0 1 1 0 2.625 1.312 1.312 0 0 1 0-2.625zm1.75 7.938a.375.375 0 0 1-.375.375h-2.75a.375.375 0 0 1-.375-.375v-.75c0-.207.168-.375.375-.375H7v-2h-.375a.375.375 0 0 1-.375-.375v-.75c0-.207.168-.375.375-.375h2c.207 0 .375.168.375.375V10.5h.375c.207 0 .375.168.375.375v.75z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M8 .25a7.751 7.751 0 0 0 0 15.5A7.75 7.75 0 1 0 8 .25zm0 14A6.246 6.246 0 0 1 1.75 8 6.248 6.248 0 0 1 8 1.75 6.248 6.248 0 0 1 14.25 8 6.246 6.246 0 0 1 8 14.25zM8 3.687a1.312 1.312 0 1 1 0 2.625 1.312 1.312 0 0 1 0-2.625zm1.75 7.938a.375.375 0 0 1-.375.375h-2.75a.375.375 0 0 1-.375-.375v-.75c0-.207.168-.375.375-.375H7v-2h-.375a.375.375 0 0 1-.375-.375v-.75c0-.207.168-.375.375-.375h2c.207 0 .375.168.375.375V10.5h.375c.207 0 .375.168.375.375v.75z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Loader.js
+++ b/src/icons/Loader.js
@ -2,8 +2,12 @@

 import React from 'react'

+const path = (
+  <path d="M16.735 2.8c0-.69864021.5663598-1.265 1.265-1.265.6986402 0 1.265.56635979 1.265 1.265v6.4c0 .69864021-.5663598 1.265-1.265 1.265-.6986402 0-1.265-.56635979-1.265-1.265V2.8zm11.118533 3.55748685c.4940132-.49401323 1.2949669-.49401323 1.7889802 0 .4940132.49401323.4940132 1.29496693 0 1.78898016l-4.5254834 4.52548339c-.4940133.4940132-1.294967.4940132-1.7889802 0-.4940132-.4940132-.4940132-1.2949669 0-1.7889802l4.5254834-4.52548335zM33.2 16.735c.6986402 0 1.265.5663598 1.265 1.265 0 .6986402-.5663598 1.265-1.265 1.265h-6.4c-.6986402 0-1.265-.5663598-1.265-1.265 0-.6986402.5663598-1.265 1.265-1.265h6.4zm-3.5574868 11.118533c.4940132.4940132.4940132 1.2949669 0 1.7889802-.4940133.4940132-1.294967.4940132-1.7889802 0l-4.5254834-4.5254834c-.4940132-.4940133-.4940132-1.294967 0-1.7889802.4940132-.4940132 1.2949669-.4940132 1.7889802 0l4.5254834 4.5254834zM19.265 33.2c0 .6986402-.5663598 1.265-1.265 1.265-.6986402 0-1.265-.5663598-1.265-1.265v-6.4c0-.6986402.5663598-1.265 1.265-1.265.6986402 0 1.265.5663598 1.265 1.265v6.4zM8.14646701 29.6425132c-.49401323.4940132-1.29496693.4940132-1.78898016 0-.49401323-.4940133-.49401323-1.294967 0-1.7889802l4.52548335-4.5254834c.4940133-.4940132 1.294967-.4940132 1.7889802 0 .4940132.4940132.4940132 1.2949669 0 1.7889802l-4.52548339 4.5254834zM2.8 19.265c-.69864021 0-1.265-.5663598-1.265-1.265 0-.6986402.56635979-1.265 1.265-1.265h6.4c.69864021 0 1.265.5663598 1.265 1.265 0 .6986402-.56635979 1.265-1.265 1.265H2.8zM6.35748685 8.14646701c-.49401323-.49401323-.49401323-1.29496693 0-1.78898016.49401323-.49401323 1.29496693-.49401323 1.78898016 0l4.52548339 4.52548335c.4940132.4940133.4940132 1.294967 0 1.7889802-.4940132.4940132-1.2949669.4940132-1.7889802 0L6.35748685 8.14646701z" />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 36 36" height={size} width={size} {...p}>
-    <path d="M16.735 2.8c0-.69864021.5663598-1.265 1.265-1.265.6986402 0 1.265.56635979 1.265 1.265v6.4c0 .69864021-.5663598 1.265-1.265 1.265-.6986402 0-1.265-.56635979-1.265-1.265V2.8zm11.118533 3.55748685c.4940132-.49401323 1.2949669-.49401323 1.7889802 0 .4940132.49401323.4940132 1.29496693 0 1.78898016l-4.5254834 4.52548339c-.4940133.4940132-1.294967.4940132-1.7889802 0-.4940132-.4940132-.4940132-1.2949669 0-1.7889802l4.5254834-4.52548335zM33.2 16.735c.6986402 0 1.265.5663598 1.265 1.265 0 .6986402-.5663598 1.265-1.265 1.265h-6.4c-.6986402 0-1.265-.5663598-1.265-1.265 0-.6986402.5663598-1.265 1.265-1.265h6.4zm-3.5574868 11.118533c.4940132.4940132.4940132 1.2949669 0 1.7889802-.4940133.4940132-1.294967.4940132-1.7889802 0l-4.5254834-4.5254834c-.4940132-.4940133-.4940132-1.294967 0-1.7889802.4940132-.4940132 1.2949669-.4940132 1.7889802 0l4.5254834 4.5254834zM19.265 33.2c0 .6986402-.5663598 1.265-1.265 1.265-.6986402 0-1.265-.5663598-1.265-1.265v-6.4c0-.6986402.5663598-1.265 1.265-1.265.6986402 0 1.265.5663598 1.265 1.265v6.4zM8.14646701 29.6425132c-.49401323.4940132-1.29496693.4940132-1.78898016 0-.49401323-.4940133-.49401323-1.294967 0-1.7889802l4.52548335-4.5254834c.4940133-.4940132 1.294967-.4940132 1.7889802 0 .4940132.4940132.4940132 1.2949669 0 1.7889802l-4.52548339 4.5254834zM2.8 19.265c-.69864021 0-1.265-.5663598-1.265-1.265 0-.6986402.56635979-1.265 1.265-1.265h6.4c.69864021 0 1.265.5663598 1.265 1.265 0 .6986402-.56635979 1.265-1.265 1.265H2.8zM6.35748685 8.14646701c-.49401323-.49401323-.49401323-1.29496693 0-1.78898016.49401323-.49401323 1.29496693-.49401323 1.78898016 0l4.52548339 4.52548335c.4940132.4940133.4940132 1.294967 0 1.7889802-.4940132.4940132-1.2949669.4940132-1.7889802 0L6.35748685 8.14646701z" />
+    {path}
  </svg>
 )
--- a/src/icons/Lock.js
+++ b/src/icons/Lock.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M15 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 14.5v-7A1.5 1.5 0 0 1 2.5 6h1V4.5A4.506 4.506 0 0 1 8.012 0C10.5.006 12.5 2.056 12.5 4.544V6h1A1.5 1.5 0 0 1 15 7.5zM5 6h6V4.5c0-1.653-1.347-3-3-3s-3 1.347-3 3V6zm8.5 1.5h-11v7h11v-7z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg width={size} height={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M15 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 14.5v-7A1.5 1.5 0 0 1 2.5 6h1V4.5A4.506 4.506 0 0 1 8.012 0C10.5.006 12.5 2.056 12.5 4.544V6h1A1.5 1.5 0 0 1 15 7.5zM5 6h6V4.5c0-1.653-1.347-3-3-3s-3 1.347-3 3V6zm8.5 1.5h-11v7h11v-7z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/LockScreen.js
+++ b/src/icons/LockScreen.js
@ -4,39 +4,47 @@

 import React from 'react'

+const defs = (
+  <defs>
+    <filter
+      id="a"
+      width="178.9%"
+      height="178.9%"
+      x="-39.4%"
+      y="-37.2%"
+      filterUnits="objectBoundingBox"
+    >
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="11.5" />
+      <feColorMatrix
+        in="shadowBlurOuter1"
+        result="shadowMatrixOuter1"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0787760417 0"
+      />
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+)
+
+const group = (
+  <g fill="none" fillRule="evenodd" filter="url(#a)" transform="translate(23 21)">
+    <rect width="90" height="90" fill="#FFF" rx="20" />
+    <path fill="#6490F1" d="M45 13.36c-17.475 0-31.64 14.165-31.64 31.64S27.524 76.64 45 76.64" />
+    <path fill="#142533" fillOpacity=".1" d="M13.36 45c0 17.475 14.165 31.64 31.64 31.64V45" />
+    <path
+      fill="#142533"
+      fillOpacity=".1"
+      d="M22.845 67.59c5.708 5.598 13.528 9.05 22.155 9.05V45"
+    />
+  </g>
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg width={size} height={size} {...p}>
-    <defs>
-      <filter
-        id="a"
-        width="178.9%"
-        height="178.9%"
-        x="-39.4%"
-        y="-37.2%"
-        filterUnits="objectBoundingBox"
-      >
-        <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
-        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="11.5" />
-        <feColorMatrix
-          in="shadowBlurOuter1"
-          result="shadowMatrixOuter1"
-          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0787760417 0"
-        />
-        <feMerge>
-          <feMergeNode in="shadowMatrixOuter1" />
-          <feMergeNode in="SourceGraphic" />
-        </feMerge>
-      </filter>
-    </defs>
-    <g fill="none" fillRule="evenodd" filter="url(#a)" transform="translate(23 21)">
-      <rect width="90" height="90" fill="#FFF" rx="20" />
-      <path fill="#6490F1" d="M45 13.36c-17.475 0-31.64 14.165-31.64 31.64S27.524 76.64 45 76.64" />
-      <path fill="#142533" fillOpacity=".1" d="M13.36 45c0 17.475 14.165 31.64 31.64 31.64V45" />
-      <path
-        fill="#142533"
-        fillOpacity=".1"
-        d="M22.845 67.59c5.708 5.598 13.528 9.05 22.155 9.05V45"
-      />
-    </g>
+    {defs}
+    {group}
  </svg>
 )
--- a/src/icons/Manager.js
+++ b/src/icons/Manager.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M5.355 5.648c-.672.677-1.248 1.267-1.728 1.771L.363 4.155a1 1 0 0 1 0-1.414L2.717.387a1 1 0 0 1 1.414 0l2.038 2.038c-.285.476-.394 1.073-.33 1.792L3.425 1.801 1.777 3.448l1.034 1.034.477-.477a.3.3 0 0 1 .424 0l.283.283a.3.3 0 0 1 0 .424l-.477.477.793.793.477-.477a.3.3 0 0 1 .424 0l.143.143zm6.525 4.61a5.282 5.282 0 0 0 1.761-.36l1.896 1.895a1 1 0 0 1 0 1.414l-2.354 2.354a1 1 0 0 1-1.414 0L8.58 12.373a66.571 66.571 0 0 0 1.754-1.745l.16.16a.3.3 0 0 1 0 .424l-.477.477.793.793.477-.477a.3.3 0 0 1 .424 0l.283.283a.3.3 0 0 1 0 .424l-.477.477.958.957 1.646-1.646-2.242-2.242zm.661-5.826l1.51-1.51a.697.697 0 0 1 1.1.152c.94 1.67.744 3.259-.575 4.577-1.153 1.154-2.565 1.502-4.127 1.02a.232.232 0 0 0-.233.057L3.71 15.234a2.09 2.09 0 1 1-2.955-2.956L7.26 5.772c.06-.06.083-.15.057-.232-.483-1.562-.134-2.974 1.02-4.128C9.655.094 11.244-.1 12.914.838a.697.697 0 0 1 .15 1.1l-1.509 1.51.165.82.82.164zM1.74 14.25a.697.697 0 0 0 .985 0l6.506-6.506a1.625 1.625 0 0 1 1.63-.404c1.068.33 1.942.115 2.73-.673.63-.63.862-1.277.702-2.015l-.854.854a1.161 1.161 0 0 1-1.049.318l-1.095-.22a1.161 1.161 0 0 1-.91-.91l-.22-1.094a1.168 1.168 0 0 1 .318-1.05l.855-.854c-.738-.16-1.386.073-2.016.702-.787.788-1.003 1.662-.673 2.73a1.625 1.625 0 0 1-.403 1.63L1.74 13.264a.697.697 0 0 0 0 .986z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M5.355 5.648c-.672.677-1.248 1.267-1.728 1.771L.363 4.155a1 1 0 0 1 0-1.414L2.717.387a1 1 0 0 1 1.414 0l2.038 2.038c-.285.476-.394 1.073-.33 1.792L3.425 1.801 1.777 3.448l1.034 1.034.477-.477a.3.3 0 0 1 .424 0l.283.283a.3.3 0 0 1 0 .424l-.477.477.793.793.477-.477a.3.3 0 0 1 .424 0l.143.143zm6.525 4.61a5.282 5.282 0 0 0 1.761-.36l1.896 1.895a1 1 0 0 1 0 1.414l-2.354 2.354a1 1 0 0 1-1.414 0L8.58 12.373a66.571 66.571 0 0 0 1.754-1.745l.16.16a.3.3 0 0 1 0 .424l-.477.477.793.793.477-.477a.3.3 0 0 1 .424 0l.283.283a.3.3 0 0 1 0 .424l-.477.477.958.957 1.646-1.646-2.242-2.242zm.661-5.826l1.51-1.51a.697.697 0 0 1 1.1.152c.94 1.67.744 3.259-.575 4.577-1.153 1.154-2.565 1.502-4.127 1.02a.232.232 0 0 0-.233.057L3.71 15.234a2.09 2.09 0 1 1-2.955-2.956L7.26 5.772c.06-.06.083-.15.057-.232-.483-1.562-.134-2.974 1.02-4.128C9.655.094 11.244-.1 12.914.838a.697.697 0 0 1 .15 1.1l-1.509 1.51.165.82.82.164zM1.74 14.25a.697.697 0 0 0 .985 0l6.506-6.506a1.625 1.625 0 0 1 1.63-.404c1.068.33 1.942.115 2.73-.673.63-.63.862-1.277.702-2.015l-.854.854a1.161 1.161 0 0 1-1.049.318l-1.095-.22a1.161 1.161 0 0 1-.91-.91l-.22-1.094a1.168 1.168 0 0 1 .318-1.05l.855-.854c-.738-.16-1.386.073-2.016.702-.787.788-1.003 1.662-.673 2.73a1.625 1.625 0 0 1-.403 1.63L1.74 13.264a.697.697 0 0 0 0 .986z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/PieChart.js
+++ b/src/icons/PieChart.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M5.2 1.067V2.71a5.985 5.985 0 0 0 2.027 11.223A5.983 5.983 0 0 0 13.34 10.7h1.625a.759.759 0 0 1-.056.22A7.5 7.5 0 0 1 .575 9.052 7.502 7.502 0 0 1 5 1.123a.759.759 0 0 1 .2-.056zM15.5 8c0 .42-.34.759-.758.759H8A.758.758 0 0 1 7.242 8V1.26c0-.42.34-.759.758-.759a7.499 7.499 0 0 1 7.5 7.501zm-3.27-4.23a5.982 5.982 0 0 0-3.47-1.705v5.178h5.176a5.985 5.985 0 0 0-1.704-3.473z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M5.2 1.067V2.71a5.985 5.985 0 0 0 2.027 11.223A5.983 5.983 0 0 0 13.34 10.7h1.625a.759.759 0 0 1-.056.22A7.5 7.5 0 0 1 .575 9.052 7.502 7.502 0 0 1 5 1.123a.759.759 0 0 1 .2-.056zM15.5 8c0 .42-.34.759-.758.759H8A.758.758 0 0 1 7.242 8V1.26c0-.42.34-.759.758-.759a7.499 7.499 0 0 1 7.5 7.501zm-3.27-4.23a5.982 5.982 0 0 0-3.47-1.705v5.178h5.176a5.985 5.985 0 0 0-1.704-3.473z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Plus.js
+++ b/src/icons/Plus.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M12 7.5v1a.376.376 0 0 1-.375.375h-2.75v2.75A.376.376 0 0 1 8.5 12h-1a.376.376 0 0 1-.375-.375v-2.75h-2.75A.376.376 0 0 1 4 8.5v-1c0-.206.169-.375.375-.375h2.75v-2.75c0-.206.169-.375.375-.375h1c.206 0 .375.169.375.375v2.75h2.75c.206 0 .375.169.375.375zm3.75.5A7.749 7.749 0 0 1 8 15.75 7.749 7.749 0 0 1 .25 8 7.749 7.749 0 0 1 8 .25 7.749 7.749 0 0 1 15.75 8zm-1.5 0A6.248 6.248 0 0 0 8 1.75 6.248 6.248 0 0 0 1.75 8 6.248 6.248 0 0 0 8 14.25 6.248 6.248 0 0 0 14.25 8z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M12 7.5v1a.376.376 0 0 1-.375.375h-2.75v2.75A.376.376 0 0 1 8.5 12h-1a.376.376 0 0 1-.375-.375v-2.75h-2.75A.376.376 0 0 1 4 8.5v-1c0-.206.169-.375.375-.375h2.75v-2.75c0-.206.169-.375.375-.375h1c.206 0 .375.169.375.375v2.75h2.75c.206 0 .375.169.375.375zm3.75.5A7.749 7.749 0 0 1 8 15.75 7.749 7.749 0 0 1 .25 8 7.749 7.749 0 0 1 8 .25 7.749 7.749 0 0 1 15.75 8zm-1.5 0A6.248 6.248 0 0 0 8 1.75 6.248 6.248 0 0 0 1.75 8 6.248 6.248 0 0 0 8 14.25 6.248 6.248 0 0 0 14.25 8z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Print.js
+++ b/src/icons/Print.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M4.75 2.08333333V6c0 .41421356-.33578644.75-.75.75s-.75-.33578644-.75-.75V1.33333333c0-.41421356.33578644-.75.75-.75h8c.4142136 0 .75.33578644.75.75V6c0 .41421356-.3357864.75-.75.75s-.75-.33578644-.75-.75V2.08333333h-6.5zM4 11.25c.41421356 0 .75.3357864.75.75s-.33578644.75-.75.75H2.66666667c-1.15059323 0-2.08333334-.9327401-2.08333334-2.0833333V7.33333333C.58333333 6.1827401 1.51607344 5.25 2.66666667 5.25H13.3333333c1.1505933 0 2.0833334.9327401 2.0833334 2.08333333v3.33333337c0 1.1505932-.9327401 2.0833333-2.0833334 2.0833333H12c-.4142136 0-.75-.3357864-.75-.75s.3357864-.75.75-.75h1.3333333c.3221661 0 .5833334-.2611672.5833334-.5833333V7.33333333c0-.3221661-.2611673-.58333333-.5833334-.58333333H2.66666667c-.32216611 0-.58333334.26116723-.58333334.58333333v3.33333337c0 .3221661.26116723.5833333.58333334.5833333H4zm.75 2.6666667h6.5v-3.8333334h-6.5v3.8333334zM4 8.58333333h8c.4142136 0 .75.33578644.75.75v5.33333337c0 .4142135-.3357864.75-.75.75H4c-.41421356 0-.75-.3357865-.75-.75V9.33333333c0-.41421356.33578644-.75.75-.75z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M4.75 2.08333333V6c0 .41421356-.33578644.75-.75.75s-.75-.33578644-.75-.75V1.33333333c0-.41421356.33578644-.75.75-.75h8c.4142136 0 .75.33578644.75.75V6c0 .41421356-.3357864.75-.75.75s-.75-.33578644-.75-.75V2.08333333h-6.5zM4 11.25c.41421356 0 .75.3357864.75.75s-.33578644.75-.75.75H2.66666667c-1.15059323 0-2.08333334-.9327401-2.08333334-2.0833333V7.33333333C.58333333 6.1827401 1.51607344 5.25 2.66666667 5.25H13.3333333c1.1505933 0 2.0833334.9327401 2.0833334 2.08333333v3.33333337c0 1.1505932-.9327401 2.0833333-2.0833334 2.0833333H12c-.4142136 0-.75-.3357864-.75-.75s.3357864-.75.75-.75h1.3333333c.3221661 0 .5833334-.2611672.5833334-.5833333V7.33333333c0-.3221661-.2611673-.58333333-.5833334-.58333333H2.66666667c-.32216611 0-.58333334.26116723-.58333334.58333333v3.33333337c0 .3221661.26116723.5833333.58333334.5833333H4zm.75 2.6666667h6.5v-3.8333334h-6.5v3.8333334zM4 8.58333333h8c.4142136 0 .75.33578644.75.75v5.33333337c0 .4142135-.3357864.75-.75.75H4c-.41421356 0-.75-.3357865-.75-.75V9.33333333c0-.41421356.33578644-.75.75-.75z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/QrCode.js
+++ b/src/icons/QrCode.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 448 512" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Receive.js
+++ b/src/icons/Receive.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M8.75 10.44l2.72-2.72a.75.75 0 0 1 1.06 1.06l-3.896 3.897A.765.765 0 0 1 8 13c-.267 0-.5-.13-.633-.323L3.47 8.78a.75.75 0 0 1 1.06-1.06l2.72 2.72V1.193C7.25.811 7.586.5 8 .5s.75.31.75.694v9.245zm-5.833 4.81c-.369 0-.667-.336-.667-.75s.298-.75.667-.75h10.666c.369 0 .667.336.667.75s-.298.75-.667.75H2.917z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M8.75 10.44l2.72-2.72a.75.75 0 0 1 1.06 1.06l-3.896 3.897A.765.765 0 0 1 8 13c-.267 0-.5-.13-.633-.323L3.47 8.78a.75.75 0 0 1 1.06-1.06l2.72 2.72V1.193C7.25.811 7.586.5 8 .5s.75.31.75.694v9.245zm-5.833 4.81c-.369 0-.667-.336-.667-.75s.298-.75.667-.75h10.666c.369 0 .667.336.667.75s-.298.75-.667.75H2.917z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Search.js
+++ b/src/icons/Search.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M12.654 11.594l2.876 2.876a.75.75 0 0 1-1.06 1.06l-2.876-2.876a6.972 6.972 0 1 1 1.06-1.06zm-1.492-.574a5.472 5.472 0 1 0-.142.142.757.757 0 0 1 .142-.142z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M12.654 11.594l2.876 2.876a.75.75 0 0 1-1.06 1.06l-2.876-2.876a6.972 6.972 0 1 1 1.06-1.06zm-1.492-.574a5.472 5.472 0 1 0-.142.142.757.757 0 0 1 .142-.142z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Send.js
+++ b/src/icons/Send.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M7.25 3.06L4.53 5.78a.75.75 0 0 1-1.06-1.06L7.366.823A.765.765 0 0 1 8 .5c.267 0 .5.13.633.323L12.53 4.72a.75.75 0 0 1-1.06 1.06L8.75 3.06v9.246c0 .383-.336.694-.75.694s-.75-.31-.75-.694V3.06zM2.917 15.25c-.369 0-.667-.336-.667-.75s.298-.75.667-.75h10.666c.369 0 .667.336.667.75s-.298.75-.667.75H2.917z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M7.25 3.06L4.53 5.78a.75.75 0 0 1-1.06-1.06L7.366.823A.765.765 0 0 1 8 .5c.267 0 .5.13.633.323L12.53 4.72a.75.75 0 0 1-1.06 1.06L8.75 3.06v9.246c0 .383-.336.694-.75.694s-.75-.31-.75-.694V3.06zM2.917 15.25c-.369 0-.667-.336-.667-.75s.298-.75.667-.75h10.666c.369 0 .667.336.667.75s-.298.75-.667.75H2.917z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Settings.js
+++ b/src/icons/Settings.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M13.94 8.583H14a.583.583 0 0 0 0-1.166h-.116a1.85 1.85 0 0 1-1.693-1.122.75.75 0 0 1-.053-.189 1.854 1.854 0 0 1 .432-1.903l.04-.04a.583.583 0 1 0-.826-.826l-.046.046a1.847 1.847 0 0 1-2.033.373A1.851 1.851 0 0 1 8.583 2.06V2a.583.583 0 0 0-1.166 0v.116A1.85 1.85 0 0 1 6.295 3.81a.75.75 0 0 1-.189.053 1.854 1.854 0 0 1-1.903-.432l-.04-.04a.583.583 0 1 0-.826.826l.046.046c.529.54.675 1.349.388 1.997A1.856 1.856 0 0 1 2.06 7.47H2a.583.583 0 0 0 0 1.167h.116a1.847 1.847 0 0 1 1.69 1.114c.306.691.159 1.5-.376 2.046l-.04.04a.583.583 0 1 0 .826.826l.046-.046c.54-.529 1.349-.675 1.997-.388A1.856 1.856 0 0 1 7.47 13.94V14a.583.583 0 0 0 1.167 0v-.116a1.847 1.847 0 0 1 1.114-1.69 1.853 1.853 0 0 1 2.046.376l.04.04a.583.583 0 1 0 .826-.826l-.046-.046a1.85 1.85 0 0 1-.371-2.037 1.851 1.851 0 0 1 1.694-1.118zm-.33-2.807c.065.087.167.14.277.14H14a2.083 2.083 0 0 1 0 4.167h-.057a.35.35 0 0 0-.32.212.35.35 0 0 0 .06.388l.04.04a2.083 2.083 0 1 1-2.947 2.947c-.136-.134-.289-.162-.427-.1a.349.349 0 0 0-.212.317V14a2.083 2.083 0 0 1-4.167 0c-.003-.186-.094-.313-.273-.38a.348.348 0 0 0-.38.064l-.04.04a2.083 2.083 0 1 1-2.947-2.948c.134-.136.162-.289.1-.427a.349.349 0 0 0-.317-.212H2A2.083 2.083 0 0 1 2 5.97c.186-.003.313-.094.38-.273a.348.348 0 0 0-.064-.38l-.04-.04A2.083 2.083 0 1 1 5.225 2.33c.136.134.289.162.42.104a.75.75 0 0 1 .132-.044.348.348 0 0 0 .14-.277V2a2.083 2.083 0 1 1 4.167 0v.057c0 .14.084.265.22.324.13.057.284.03.38-.065l.04-.04a2.083 2.083 0 1 1 2.947 2.948c-.134.136-.162.289-.104.42a.75.75 0 0 1 .044.132zM8 5.25a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5zm0 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M13.94 8.583H14a.583.583 0 0 0 0-1.166h-.116a1.85 1.85 0 0 1-1.693-1.122.75.75 0 0 1-.053-.189 1.854 1.854 0 0 1 .432-1.903l.04-.04a.583.583 0 1 0-.826-.826l-.046.046a1.847 1.847 0 0 1-2.033.373A1.851 1.851 0 0 1 8.583 2.06V2a.583.583 0 0 0-1.166 0v.116A1.85 1.85 0 0 1 6.295 3.81a.75.75 0 0 1-.189.053 1.854 1.854 0 0 1-1.903-.432l-.04-.04a.583.583 0 1 0-.826.826l.046.046c.529.54.675 1.349.388 1.997A1.856 1.856 0 0 1 2.06 7.47H2a.583.583 0 0 0 0 1.167h.116a1.847 1.847 0 0 1 1.69 1.114c.306.691.159 1.5-.376 2.046l-.04.04a.583.583 0 1 0 .826.826l.046-.046c.54-.529 1.349-.675 1.997-.388A1.856 1.856 0 0 1 7.47 13.94V14a.583.583 0 0 0 1.167 0v-.116a1.847 1.847 0 0 1 1.114-1.69 1.853 1.853 0 0 1 2.046.376l.04.04a.583.583 0 1 0 .826-.826l-.046-.046a1.85 1.85 0 0 1-.371-2.037 1.851 1.851 0 0 1 1.694-1.118zm-.33-2.807c.065.087.167.14.277.14H14a2.083 2.083 0 0 1 0 4.167h-.057a.35.35 0 0 0-.32.212.35.35 0 0 0 .06.388l.04.04a2.083 2.083 0 1 1-2.947 2.947c-.136-.134-.289-.162-.427-.1a.349.349 0 0 0-.212.317V14a2.083 2.083 0 0 1-4.167 0c-.003-.186-.094-.313-.273-.38a.348.348 0 0 0-.38.064l-.04.04a2.083 2.083 0 1 1-2.947-2.948c.134-.136.162-.289.1-.427a.349.349 0 0 0-.317-.212H2A2.083 2.083 0 0 1 2 5.97c.186-.003.313-.094.38-.273a.348.348 0 0 0-.064-.38l-.04-.04A2.083 2.083 0 1 1 5.225 2.33c.136.134.289.162.42.104a.75.75 0 0 1 .132-.044.348.348 0 0 0 .14-.277V2a2.083 2.083 0 1 1 4.167 0v.057c0 .14.084.265.22.324.13.057.284.03.38-.065l.04-.04a2.083 2.083 0 1 1 2.947 2.948c-.134.136-.162.289-.104.42a.75.75 0 0 1 .044.132zM8 5.25a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5zm0 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Share.js
+++ b/src/icons/Share.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M2.58333333 8c0-.41421356.33578644-.75.75-.75.41421357 0 .75.33578644.75.75v4.6666667c0 .2301186.18654802.4166666.41666667.4166666h7c.2301186 0 .4166667-.186548.4166667-.4166666V8c0-.41421356.3357864-.75.75-.75.4142135 0 .75.33578644.75.75v4.6666667c0 1.0585457-.8581209 1.9166666-1.9166667 1.9166666h-7c-1.05854577 0-1.91666667-.8581209-1.91666667-1.9166666V8zm3.61366342-2.96966991c-.29289322.29289321-.76776695.29289321-1.06066017 0-.29289322-.29289322-.29289322-.76776696 0-1.06066018l2.33333333-2.33333333c.29289322-.29289322.76776696-.29289322 1.06066018 0l2.33333331 2.33333333c.2928932.29289322.2928932.76776696 0 1.06066018-.2928932.29289321-.7677669.29289321-1.06066015 0L8 3.22732684 6.19699675 5.03033009zM7.25 2.16666667c0-.41421357.33578644-.75.75-.75s.75.33578643.75.75V9.75c0 .4142136-.33578644.75-.75.75s-.75-.3357864-.75-.75V2.16666667z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M2.58333333 8c0-.41421356.33578644-.75.75-.75.41421357 0 .75.33578644.75.75v4.6666667c0 .2301186.18654802.4166666.41666667.4166666h7c.2301186 0 .4166667-.186548.4166667-.4166666V8c0-.41421356.3357864-.75.75-.75.4142135 0 .75.33578644.75.75v4.6666667c0 1.0585457-.8581209 1.9166666-1.9166667 1.9166666h-7c-1.05854577 0-1.91666667-.8581209-1.91666667-1.9166666V8zm3.61366342-2.96966991c-.29289322.29289321-.76776695.29289321-1.06066017 0-.29289322-.29289322-.29289322-.76776696 0-1.06066018l2.33333333-2.33333333c.29289322-.29289322.76776696-.29289322 1.06066018 0l2.33333331 2.33333333c.2928932.29289322.2928932.76776696 0 1.06066018-.2928932.29289321-.7677669.29289321-1.06066015 0L8 3.22732684 6.19699675 5.03033009zM7.25 2.16666667c0-.41421357.33578644-.75.75-.75s.75.33578643.75.75V9.75c0 .4142136-.33578644.75-.75.75s-.75-.3357864-.75-.75V2.16666667z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Shield.js
+++ b/src/icons/Shield.js
@ -2,48 +2,56 @@

 import React from 'react'

-export default (p: Object) => (
-  <svg viewBox="0 0 28 32" height={32} width={28} {...p}>
-    <defs>
-      <filter
-        id="a"
-        width="163.6%"
-        height="153.8%"
-        x="-31.8%"
-        y="-23.1%"
-        filterUnits="objectBoundingBox"
-      >
-        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
-        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
-        <feColorMatrix
-          in="shadowBlurOuter1"
-          result="shadowMatrixOuter1"
-          values="0 0 0 0 0.418261054 0 0 0 0 0.418261054 0 0 0 0 0.418261054 0 0 0 0.116196784 0"
-        />
-        <feMerge>
-          <feMergeNode in="shadowMatrixOuter1" />
-          <feMergeNode in="SourceGraphic" />
-        </feMerge>
-      </filter>
-      <path
-        id="b"
-        d="M11 25.5806452s11-3.7741936 11-11.9516129V4.08870968L11 0 0 4.08870968v9.54032262c0 8.1774193 11 11.9516129 11 11.9516129z"
+const defs = (
+  <defs>
+    <filter
+      id="a"
+      width="163.6%"
+      height="153.8%"
+      x="-31.8%"
+      y="-23.1%"
+      filterUnits="objectBoundingBox"
+    >
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+      <feColorMatrix
+        in="shadowBlurOuter1"
+        result="shadowMatrixOuter1"
+        values="0 0 0 0 0.418261054 0 0 0 0 0.418261054 0 0 0 0 0.418261054 0 0 0 0.116196784 0"
      />
-    </defs>
-    <g fill="none" fillRule="evenodd" filter="url(#a)" transform="translate(3 2)">
-      <g strokeLinecap="round" strokeLinejoin="round">
-        <use fill="#FFF" stroke="currentColor" strokeWidth="1.5" xlinkHref="#b" />
-        <path
-          stroke="#FFF"
-          strokeWidth="2"
-          d="M10.6754629 26.5265181c-.1002644-.0344015-.2759634-.0990392-.5164692-.1943297-.39391814-.1560737-.83107448-.3435638-1.3008837-.5629688-1.3411669-.6263368-2.68247439-1.3856899-3.93963025-2.2843167C1.24412544 20.85844-1 17.5860312-1 13.6290323V3.39356402l12-4.46041056 12 4.46041056V13.6290323c0 3.9569989-2.2441254 7.2294077-5.9184797 9.8558706-1.2571559.8986268-2.5984634 1.6579799-3.9396303 2.2843167-.4698092.219405-.9069656.4068951-1.3008837.5629688-.2405058.0952905-.4162048.1599282-.5164692.1943297L11 26.6378696l-.3245371-.1113515z"
-        />
-      </g>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+    <path
+      id="b"
+      d="M11 25.5806452s11-3.7741936 11-11.9516129V4.08870968L11 0 0 4.08870968v9.54032262c0 8.1774193 11 11.9516129 11 11.9516129z"
+    />
+  </defs>
+)
+
+const group = (
+  <g fill="none" fillRule="evenodd" filter="url(#a)" transform="translate(3 2)">
+    <g strokeLinecap="round" strokeLinejoin="round">
+      <use fill="#FFF" stroke="currentColor" strokeWidth="1.5" xlinkHref="#b" />
      <path
-        fill="currentColor"
-        fillRule="nonzero"
-        d="M14.4936649 8.7193017c-.3544349 0-.6426937.29661569-.6426937.66261516l-.0115902 2.97078244s.0011217.2071877-.1921725.2071877c-.1974068 0-.1919856-.2071877-.1919856-.2071877V8.06728684c0-.36580674-.28452-.64970207-.6391418-.64970207-.3549957 0-.6077362.28389533-.6077362.64970207v4.28521976s-.0216848.2095005-.2125488.2095005c-.1889945 0-.2033888-.2095005-.2033888-.2095005V7.35301931c0-.36561401-.2673217-.64334189-.6221304-.64334189-.3548088 0-.6243737.27772788-.6243737.64334189v4.99948729s-.0097208.200442-.2140443.200442c-.2007717 0-.2017064-.200442-.2017064-.200442V8.63854668c0-.36580674-.2777902-.5951587-.63241204-.5951587-.35499571 0-.61465292.22935196-.61465292.5951587v5.42793212s-.03477051.2413014-.37032465-.1572699c-.8604767-1.0209053-1.30931541-1.2238529-1.30931541-1.2238529s-.81673316-.412448-1.17845865.3322713c-.26208741.5400371.01551588.5691397.44416525 1.2323331.37911075.5872567 1.57831954 2.1318168 1.57831954 2.1318168s1.42241305 2.0687933 3.34189488 2.0687933c0 0 3.7595149.1653647 3.7595149-3.6694387l-.0130857-5.39921494c.0001869-.36599947-.2873241-.66261516-.6421328-.66261516"
+        stroke="#FFF"
+        strokeWidth="2"
+        d="M10.6754629 26.5265181c-.1002644-.0344015-.2759634-.0990392-.5164692-.1943297-.39391814-.1560737-.83107448-.3435638-1.3008837-.5629688-1.3411669-.6263368-2.68247439-1.3856899-3.93963025-2.2843167C1.24412544 20.85844-1 17.5860312-1 13.6290323V3.39356402l12-4.46041056 12 4.46041056V13.6290323c0 3.9569989-2.2441254 7.2294077-5.9184797 9.8558706-1.2571559.8986268-2.5984634 1.6579799-3.9396303 2.2843167-.4698092.219405-.9069656.4068951-1.3008837.5629688-.2405058.0952905-.4162048.1599282-.5164692.1943297L11 26.6378696l-.3245371-.1113515z"
      />
    </g>
+    <path
+      fill="currentColor"
+      fillRule="nonzero"
+      d="M14.4936649 8.7193017c-.3544349 0-.6426937.29661569-.6426937.66261516l-.0115902 2.97078244s.0011217.2071877-.1921725.2071877c-.1974068 0-.1919856-.2071877-.1919856-.2071877V8.06728684c0-.36580674-.28452-.64970207-.6391418-.64970207-.3549957 0-.6077362.28389533-.6077362.64970207v4.28521976s-.0216848.2095005-.2125488.2095005c-.1889945 0-.2033888-.2095005-.2033888-.2095005V7.35301931c0-.36561401-.2673217-.64334189-.6221304-.64334189-.3548088 0-.6243737.27772788-.6243737.64334189v4.99948729s-.0097208.200442-.2140443.200442c-.2007717 0-.2017064-.200442-.2017064-.200442V8.63854668c0-.36580674-.2777902-.5951587-.63241204-.5951587-.35499571 0-.61465292.22935196-.61465292.5951587v5.42793212s-.03477051.2413014-.37032465-.1572699c-.8604767-1.0209053-1.30931541-1.2238529-1.30931541-1.2238529s-.81673316-.412448-1.17845865.3322713c-.26208741.5400371.01551588.5691397.44416525 1.2323331.37911075.5872567 1.57831954 2.1318168 1.57831954 2.1318168s1.42241305 2.0687933 3.34189488 2.0687933c0 0 3.7595149.1653647 3.7595149-3.6694387l-.0130857-5.39921494c.0001869-.36599947-.2873241-.66261516-.6421328-.66261516"
+    />
+  </g>
+)
+
+export default (p: Object) => (
+  <svg viewBox="0 0 28 32" height={32} width={28} {...p}>
+    {defs}
+    {group}
  </svg>
 )
--- a/src/icons/Top.js
+++ b/src/icons/Top.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M4.502 11h6.996c1.333 0 2.005-1.617 1.06-2.56l-3.497-3.5a1.5 1.5 0 0 0-2.122 0l-3.498 3.5C2.499 9.381 3.166 11 4.5 11z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M4.502 11h6.996c1.333 0 2.005-1.617 1.06-2.56l-3.497-3.5a1.5 1.5 0 0 0-2.122 0l-3.498 3.5C2.499 9.381 3.166 11 4.5 11z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/Usb.js
+++ b/src/icons/Usb.js
@ -2,13 +2,17 @@

 import React from 'react'

+const group = (
+  <g fill="currentColor">
+    <path d="M13.62711864 10.13333333h8.77966106c.346348 0 .6271186-.2760911.6271186-.61666666v-7.4c0-.3405756-.2807706-.61666667-.6271186-.61666667h-8.77966106C13.28077058 1.5 13 1.77609107 13 2.11666667v7.4c0 .34057556.28077058.61666666.62711864.61666666zm.62711865-7.4H21.779661V8.9h-7.52542371V2.73333333z" />
+    <path d="M23.4922034 23.0333333H12.3050339l-.05079661-12.79999997H23.5423729l-.0501695 12.79999997zm1.3044068-.0666667V10.23333333C24.7966102 9.5517411 24.2355175 9 23.5423729 9H12.25423729C11.56159999 9 11 9.55185858 11 10.23333333V22.9666666c0 .7179702.58202986 1.3000001 1.30000007 1.3000001H23.4966101c.7179702 0 1.3000001-.5820299 1.3000001-1.3000001z" />
+    <path d="M19.71696115 24.23333333V26.7h-3.76271186v-2.46666667h3.76271186zm0 3.7c.69314464 0 1.25423729-.5517411 1.25423729-1.23333333v-3.08333333c0-.34057557-.28077061-.61666667-.62711864-.61666667h-5.01694916c-.34634803 0-.62711864.2760911-.62711864.61666667V26.7c0 .68147476.56159999 1.23333333 1.25423729 1.23333333h3.76271186z" />
+    <path d="M16.52711233 34.8666667h2.50847458c.34634803 0 .62711864-.2760911.62711864-.6166667v-6.63333333c0-.34057557-.28077061-.61666667-.62711864-.61666667h-2.50847458c-.34634803 0-.62711864.2760911-.62711864.61666667V34.25c0 .3405756.28077061.6166667.62711864.6166667zm.62711865-6.63333337h1.25423729v5.39999997h-1.25423729v-5.39999997zM15.399994 4.61666667v2.46666666c0 .3405756.28077061.61666667.62711864.61666667.34634804 0 .62711865-.27609107.62711865-.61666667V4.61666667c0-.3405756-.28077061-.61666667-.62711865-.61666667-.34634803 0-.62711864.27609107-.62711864.61666667zm4 0v2.46666666c0 .3405756.28077061.61666667.62711864.61666667.34634804 0 .62711865-.27609107.62711865-.61666667V4.61666667c0-.3405756-.28077061-.61666667-.62711865-.61666667-.34634803 0-.62711864.27609107-.62711864.61666667z" />
+  </g>
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 36 36" height={size} width={size} {...p}>
-    <g fill="currentColor">
-      <path d="M13.62711864 10.13333333h8.77966106c.346348 0 .6271186-.2760911.6271186-.61666666v-7.4c0-.3405756-.2807706-.61666667-.6271186-.61666667h-8.77966106C13.28077058 1.5 13 1.77609107 13 2.11666667v7.4c0 .34057556.28077058.61666666.62711864.61666666zm.62711865-7.4H21.779661V8.9h-7.52542371V2.73333333z" />
-      <path d="M23.4922034 23.0333333H12.3050339l-.05079661-12.79999997H23.5423729l-.0501695 12.79999997zm1.3044068-.0666667V10.23333333C24.7966102 9.5517411 24.2355175 9 23.5423729 9H12.25423729C11.56159999 9 11 9.55185858 11 10.23333333V22.9666666c0 .7179702.58202986 1.3000001 1.30000007 1.3000001H23.4966101c.7179702 0 1.3000001-.5820299 1.3000001-1.3000001z" />
-      <path d="M19.71696115 24.23333333V26.7h-3.76271186v-2.46666667h3.76271186zm0 3.7c.69314464 0 1.25423729-.5517411 1.25423729-1.23333333v-3.08333333c0-.34057557-.28077061-.61666667-.62711864-.61666667h-5.01694916c-.34634803 0-.62711864.2760911-.62711864.61666667V26.7c0 .68147476.56159999 1.23333333 1.25423729 1.23333333h3.76271186z" />
-      <path d="M16.52711233 34.8666667h2.50847458c.34634803 0 .62711864-.2760911.62711864-.6166667v-6.63333333c0-.34057557-.28077061-.61666667-.62711864-.61666667h-2.50847458c-.34634803 0-.62711864.2760911-.62711864.61666667V34.25c0 .3405756.28077061.6166667.62711864.6166667zm.62711865-6.63333337h1.25423729v5.39999997h-1.25423729v-5.39999997zM15.399994 4.61666667v2.46666666c0 .3405756.28077061.61666667.62711864.61666667.34634804 0 .62711865-.27609107.62711865-.61666667V4.61666667c0-.3405756-.28077061-.61666667-.62711865-.61666667-.34634803 0-.62711864.27609107-.62711864.61666667zm4 0v2.46666666c0 .3405756.28077061.61666667.62711864.61666667.34634804 0 .62711865-.27609107.62711865-.61666667V4.61666667c0-.3405756-.28077061-.61666667-.62711865-.61666667-.34634803 0-.62711864.27609107-.62711864.61666667z" />
-    </g>
+    {group}
  </svg>
 )
--- a/src/icons/User.js
+++ b/src/icons/User.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M14.5055556 14.5c0 .4142136-.3357864.75-.75.75s-.75-.3357864-.75-.75v-1.4444444c0-1.1812758-.9576132-2.1388889-2.1388889-2.1388889H5.08888894c-1.18127572 0-2.13888889.9576131-2.13888889 2.1388889V14.5c0 .4142136-.33578644.75-.75.75s-.75-.3357864-.75-.75v-1.4444444c0-2.0097029 1.62918605-3.63888893 3.63888889-3.63888893h5.77777776c2.0097029 0 3.6388889 1.62918603 3.6388889 3.63888893V14.5zM7.97777783 8.02777778c-2.00970284 0-3.63888889-1.62918605-3.63888889-3.63888889S5.96807499.75 7.97777783.75s3.63888887 1.62918605 3.63888887 3.63888889-1.62918603 3.63888889-3.63888887 3.63888889zm0-1.5c1.18127571 0 2.13888887-.95761318 2.13888887-2.13888889C10.1166667 3.20761317 9.15905354 2.25 7.97777783 2.25c-1.18127572 0-2.13888889.95761317-2.13888889 2.13888889 0 1.18127571.95761317 2.13888889 2.13888889 2.13888889z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M14.5055556 14.5c0 .4142136-.3357864.75-.75.75s-.75-.3357864-.75-.75v-1.4444444c0-1.1812758-.9576132-2.1388889-2.1388889-2.1388889H5.08888894c-1.18127572 0-2.13888889.9576131-2.13888889 2.1388889V14.5c0 .4142136-.33578644.75-.75.75s-.75-.3357864-.75-.75v-1.4444444c0-2.0097029 1.62918605-3.63888893 3.63888889-3.63888893h5.77777776c2.0097029 0 3.6388889 1.62918603 3.6388889 3.63888893V14.5zM7.97777783 8.02777778c-2.00970284 0-3.63888889-1.62918605-3.63888889-3.63888889S5.96807499.75 7.97777783.75s3.63888887 1.62918605 3.63888887 3.63888889-1.62918603 3.63888889-3.63888887 3.63888889zm0-1.5c1.18127571 0 2.13888887-.95761318 2.13888887-2.13888889C10.1166667 3.20761317 9.15905354 2.25 7.97777783 2.25c-1.18127572 0-2.13888889.95761317-2.13888889 2.13888889 0 1.18127571.95761317 2.13888889 2.13888889 2.13888889z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/device/Blue.js
+++ b/src/icons/device/Blue.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M8.78055577 5C8.34946672 5 8 5.34946672 8 5.78055577V30.2194442C8 30.6505333 8.34946672 31 8.78055577 31H27.2194442C27.6505333 31 28 30.6505333 28 30.2194442V5.78055577C28 5.34946672 27.6505333 5 27.2194442 5H8.78055577zm0-2H27.2194442C28.7551028 3 30 4.24489722 30 5.78055577V30.2194442C30 31.7551028 28.7551028 33 27.2194442 33H8.78055577C7.24489722 33 6 31.7551028 6 30.2194442V5.78055577C6 4.24489722 7.24489722 3 8.78055577 3zm3.33166653 5h11.7755554C24.5020411 8 25 8.49795889 25 9.11222231V26.8877777C25 27.5020411 24.5020411 28 23.8877777 28H12.1122223C11.4979589 28 11 27.5020411 11 26.8877777V9.11222231C11 8.49795889 11.4979589 8 12.1122223 8zM12.5 9.5v17h11v-17h-11z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 36 36" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M8.78055577 5C8.34946672 5 8 5.34946672 8 5.78055577V30.2194442C8 30.6505333 8.34946672 31 8.78055577 31H27.2194442C27.6505333 31 28 30.6505333 28 30.2194442V5.78055577C28 5.34946672 27.6505333 5 27.2194442 5H8.78055577zm0-2H27.2194442C28.7551028 3 30 4.24489722 30 5.78055577V30.2194442C30 31.7551028 28.7551028 33 27.2194442 33H8.78055577C7.24489722 33 6 31.7551028 6 30.2194442V5.78055577C6 4.24489722 7.24489722 3 8.78055577 3zm3.33166653 5h11.7755554C24.5020411 8 25 8.49795889 25 9.11222231V26.8877777C25 27.5020411 24.5020411 28 23.8877777 28H12.1122223C11.4979589 28 11 27.5020411 11 26.8877777V9.11222231C11 8.49795889 11.4979589 8 12.1122223 8zM12.5 9.5v17h11v-17h-11z"
-    />
+    {path}
  </svg>
 )
--- a/src/icons/device/NanoS.js
+++ b/src/icons/device/NanoS.js
@ -2,11 +2,15 @@

 import React from 'react'

+const path = (
+  <path
+    fill="currentColor"
+    d="M8 17.451c-.51562-.68629-1.2037-1.2356-2-1.5835V1.9995H2v13.868c-.79625.3479-1.4844.89718-2 1.5835V1.44C0 .64471.64471 0 1.44 0h5.12C7.35529 0 8 .64471 8 1.44v.75355h.40706c.32747 0 .59294.26547.59294.59294v1.0077c0 .32747-.26547.59294-.59294.59294H8v6.5806h.40706c.32747 0 .59294.26547.59294.59294v1.0077c0 .32747-.26547.59294-.59294.59294H8v4.2898zm-4 6.4844c-.55228 0-1-.44772-1-1s.44772-1 1-1 1 .44772 1 1-.44772 1-1 1zm-2 8.0645h4v-11.548c0-1.1046-.89543-2-2-2s-2 .89543-2 2v11.548zm2-15.548c2.2091 0 4 1.7909 4 4v12.363c0 .65494-.53094 1.1859-1.1859 1.1859H1.1859C.53096 34.0008 0 33.46986 0 32.8149v-12.363c0-2.2091 1.7909-4 4-4z"
+  />
+)
+
 export default ({ size, ...p }: { size: number }) => (
  <svg viewBox="0 0 9 34" height={size} width={size} {...p}>
-    <path
-      fill="currentColor"
-      d="M8 17.451c-.51562-.68629-1.2037-1.2356-2-1.5835V1.9995H2v13.868c-.79625.3479-1.4844.89718-2 1.5835V1.44C0 .64471.64471 0 1.44 0h5.12C7.35529 0 8 .64471 8 1.44v.75355h.40706c.32747 0 .59294.26547.59294.59294v1.0077c0 .32747-.26547.59294-.59294.59294H8v6.5806h.40706c.32747 0 .59294.26547.59294.59294v1.0077c0 .32747-.26547.59294-.59294.59294H8v4.2898zm-4 6.4844c-.55228 0-1-.44772-1-1s.44772-1 1-1 1 .44772 1 1-.44772 1-1 1zm-2 8.0645h4v-11.548c0-1.1046-.89543-2-2-2s-2 .89543-2 2v11.548zm2-15.548c2.2091 0 4 1.7909 4 4v12.363c0 .65494-.53094 1.1859-1.1859 1.1859H1.1859C.53096 34.0008 0 33.46986 0 32.8149v-12.363c0-2.2091 1.7909-4 4-4z"
-    />
+    {path}
  </svg>
 )