refactor: use same icons as in kutt

thedevs-network · Mar 16, 2020 · 4e6213e · 4e6213e
1 parent fd4eb52
commit 4e6213e
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 33 deletions.
diff --git a/src/components/Icon/Copy.tsx b/src/components/Icon/Copy.tsx
@@ -3,15 +3,16 @@ import React from 'react';
 const Copy: React.FC = () => {
     return (
         <svg
-            viewBox="-2 -2 30 30"
-            width={20}
-            height={20}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
             fill="none"
-            strokeWidth="2"
-            stroke="#b9b9b9"
+            stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
-            preserveAspectRatio="xMinYMin"
+            strokeWidth="2"
+            className="feather feather-copy"
+            viewBox="0 0 24 24"
         >
             <rect width="13" height="13" x="9" y="9" rx="2" ry="2" />
             <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />

diff --git a/src/components/Icon/Cross.tsx b/src/components/Icon/Cross.tsx
@@ -3,13 +3,18 @@ import React from 'react';
 const Cross: React.FC = () => {
     return (
         <svg
-            viewBox="-6 -6 24 24"
-            width={24}
-            height={24}
-            preserveAspectRatio="xMinYMin"
-            className="close_svg__jam close_svg__jam-close"
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            fill="none"
+            stroke="#000"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
         >
-            <path d="M7.314 5.9l3.535-3.536A1 1 0 109.435.95L5.899 4.485 2.364.95A1 1 0 10.95 2.364l3.535 3.535L.95 9.435a1 1 0 101.414 1.414l3.535-3.535 3.536 3.535a1 1 0 101.414-1.414L7.314 5.899z" />
+            <path d="M18 6L6 18" />
+            <path d="M6 6L18 18" />
         </svg>
     );
 };

diff --git a/src/components/Icon/QRCode.tsx b/src/components/Icon/QRCode.tsx
@@ -3,12 +3,13 @@ import React from 'react';
 const QRCode: React.FC = () => {
     return (
         <svg
-            viewBox="-2 -2 30 30"
-            width={20}
-            height={20}
-            fill="#b9b9b9"
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            fill="currentColor"
+            className="jam jam-qr-code"
             preserveAspectRatio="xMinYMin"
-            className="qr-code_svg__jam qr-code_svg__jam-qr-code"
+            viewBox="-2 -2 24 24"
         >
             <path d="M13 18h3a2 2 0 002-2v-3a1 1 0 012 0v3a4 4 0 01-4 4H4a4 4 0 01-4-4v-3a1 1 0 012 0v3a2 2 0 002 2h3a1 1 0 010 2h6a1 1 0 010-2zM2 7a1 1 0 11-2 0V4a4 4 0 014-4h3a1 1 0 110 2H4a2 2 0 00-2 2v3zm16 0V4a2 2 0 00-2-2h-3a1 1 0 010-2h3a4 4 0 014 4v3a1 1 0 01-2 0z" />
         </svg>

diff --git a/src/components/Icon/Refresh.tsx b/src/components/Icon/Refresh.tsx
@@ -3,14 +3,20 @@ import React from 'react';
 const Refresh: React.FC = () => {
     return (
         <svg
-            viewBox="-2 -2 24 24"
-            width={24}
-            height={24}
-            fill="#b8b8b8"
-            preserveAspectRatio="xMinYMin"
-            className="refresh_svg__jam refresh_svg__jam-refresh"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            className="feather feather-refresh-ccw"
+            viewBox="0 0 24 24"
         >
-            <path d="M17.83 4.194l.42-1.377a1 1 0 111.913.585l-1.17 3.825a1 1 0 01-1.248.664l-3.825-1.17a1 1 0 11.585-1.912l1.672.511A7.381 7.381 0 003.185 6.584l-.26.633a1 1 0 11-1.85-.758l.26-.633A9.381 9.381 0 0117.83 4.194zM2.308 14.807l-.327 1.311a1 1 0 11-1.94-.484l.967-3.88a1 1 0 011.265-.716l3.828.954a1 1 0 01-.484 1.941l-1.786-.445a7.384 7.384 0 0013.216-1.792 1 1 0 111.906.608 9.381 9.381 0 01-5.38 5.831 9.386 9.386 0 01-11.265-3.328z" />
+            <path d="M1 4L1 10 7 10" />
+            <path d="M23 20L23 14 17 14" />
+            <path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" />
         </svg>
     );
 };

diff --git a/src/components/Icon/Tick.tsx b/src/components/Icon/Tick.tsx
@@ -1,18 +1,21 @@
 import React from 'react';
 
-const Check: React.FC = () => {
+const Tick: React.FC = () => {
     return (
         <svg
-            viewBox="-5 -7 24 24"
-            width={24}
-            height={24}
-            fill="#b8b8b8"
-            preserveAspectRatio="xMinYMin"
-            className="check_svg__jam check_svg__jam-check"
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            fill="none"
+            stroke="#000"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
         >
-            <path d="M5.486 9.73a.997.997 0 01-.707-.292L.537 5.195A1 1 0 111.95 3.78l3.535 3.535L11.85.952a1 1 0 011.415 1.414L6.193 9.438a.997.997 0 01-.707.292z" />
+            <path d="M20 6L9 17 4 12" />
         </svg>
     );
 };
 
-export default React.memo(Check);
+export default React.memo(Tick);