fix: update icons

AmityCo · Feb 9, 2024 · 06603a6 · 06603a6
1 parent 1743f2f
commit 06603a6
Show file tree

Hide file tree

Showing 102 changed files with 335 additions and 1,677 deletions.
diff --git a/src/icons/ArrowLeft.jsx b/src/icons/ArrowLeft.jsx
diff --git a/src/icons/ArrowLeft.tsx b/src/icons/ArrowLeft.tsx
@@ -1,22 +1,9 @@
-import React from 'react';
+import styled from 'styled-components';
 
-const ArrowLeft = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 448 512"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M229.9 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L94.569 282H436c6.627
-      0 12-5.373 12-12v-28c0-6.627-5.373-12-12-12H94.569l155.13-155.13c4.686-4.686
-      4.686-12.284 0-16.971L229.9 38.101c-4.686-4.686-12.284-4.686-16.971 0L3.515
-      247.515c-4.686 4.686-4.686 12.284 0 16.971L212.929 473.9c4.686 4.686 12.284
-      4.686 16.971-.001z"
-    />
-  </svg>
-);
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/pro-regular-svg-icons';
+import { ReactNode } from 'react';
 
-export default ArrowLeft;
+export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faArrowLeft })`
+  font-size: ${({ height = 'inherit' }) => height};
+`;
diff --git a/src/icons/ArrowRight.jsx → src/icons/ArrowRight.tsx b/src/icons/ArrowRight.jsx → src/icons/ArrowRight.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const ArrowRight = (props: React.SVGProps<SVGSVGElement>) => (
+const Svg = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
     width="100%"
     height="100%"
@@ -16,6 +16,6 @@ const ArrowRight = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default ArrowRight;
+export default Svg;
 
 export const backgroundImage = `url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.46094 6.33203C1.63281 6.33203 1.77344 6.26172 1.97656 6.16406L6.82422 3.82812C7.18359 3.65234 7.33594 3.45312 7.33594 3.18359C7.33594 2.91406 7.18359 2.71484 6.82422 2.53906L1.97656 0.203125C1.77344 0.105469 1.62891 0.0351562 1.45703 0.0351562C1.12109 0.0351562 0.863281 0.292969 0.863281 0.714844L0.867188 5.65625C0.867188 6.07422 1.125 6.33203 1.46094 6.33203Z' fill='%23636878' /%3E%3C/svg%3E");`;
diff --git a/src/icons/Balloon.jsx → src/icons/Balloon.tsx b/src/icons/Balloon.jsx → src/icons/Balloon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Balloon = (props: React.SVGProps<SVGSVGElement>) => (
+const Svg = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width="262" height="243" fill="none" viewBox="0 0 262 243" {...props}>
     <g>
       <path fill="#BCF7FC" d="M104 149l-11 4 10 32 17 17-16-53z" />
@@ -30,6 +30,6 @@ const Balloon = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default Balloon;
+export default Svg;
 
 export const backgroundImage = `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='262' height='243' fill='none' viewBox='0 0 262 243'%3E%3Cg rel='balloon'%3E%3Cpath fill='%23BCF7FC' d='M104 149l-11 4 10 32 17 17-16-53z'/%3E%3Cpath fill='%2397E4FD' d='M162 174l5 11-31 15-24-2 50-24z'/%3E%3Cpath fill='%23E8F7F4' d='M190 32a78 78 0 00-109 76l43 45 66-121z'/%3E%3Cpath fill='%23231F20' d='M190 32l-45 131 62 1a78 78 0 00-17-132z'/%3E%3Cpath fill='%23EC95AD' d='M190 32l-66 121 52-3c7-9 13-20 18-31 17-39 16-78-4-87z'/%3E%3Cpath fill='%234A82F2' d='M190 32c-20-9-50 16-67 56-5 11-9 23-10 34l21 36 56-126z'/%3E%3Cpath fill='%234CBEFF' d='M130 169l37 16 25-11 15-10-63-28-22 10 8 23z'/%3E%3Cpath fill='%2371D1FE' d='M81 108l3 18 9 27 37 16 14-33-63-28z'/%3E%3Cpath fill='%23231F20' d='M136 200l-17-8-13 10 2 16 16 7 12-25z'/%3E%3Cpath fill='%23EC95AD' d='M103 185l16 7-11 26-16-7 11-26z'/%3E%3C/g%3E%3Cg rel='heart'%3E%3Cpath fill='%23D9E5FC' fill-rule='evenodd' d='M54 89c4-5 6-11 6-17 0-15-13-28-29-28C16 44 3 57 3 72s13 28 28 28c7 0 13-2 17-5l12 3-6-9z' clip-rule='evenodd'/%3E%3Cpath fill='%231054DE' d='M24 61c3 0 6 2 7 4 2-2 4-4 7-4 5 0 9 4 9 8 0 11-16 17-16 17s-15-6-15-17c0-4 4-8 8-8z'/%3E%3C/g%3E%3C/svg%3E")`;
diff --git a/src/icons/Ban.jsx b/src/icons/Ban.jsx
diff --git a/src/icons/Ban.tsx b/src/icons/Ban.tsx
@@ -1,24 +1,10 @@
-import React from 'react';
 import styled from 'styled-components';
 
-const Ban = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 512 512"
-    {...props}
-  >
-    <path
-      d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256
-      8zm141.421 106.579c73.176 73.175 77.05 187.301 15.964 264.865L132.556 98.615c77.588-61.105
-      191.709-57.193 264.865 15.964zM114.579
-      397.421c-73.176-73.175-77.05-187.301-15.964-264.865l280.829 280.829c-77.588 61.105-191.709
-      57.193-264.865-15.964z"
-    />
-  </svg>
-);
+import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';
+import { faBan } from '@fortawesome/pro-regular-svg-icons';
+import { ReactNode } from 'react';
 
-export default styled(Ban)`
-  fill: ${({ theme }) => theme.palette.base.shade3};
+export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faBan })`
+  color: ${({ theme }) => theme.palette.base.shade3};
+  font-size: ${({ height = 'inherit' }) => height};
 `;
diff --git a/src/icons/Bars.jsx b/src/icons/Bars.jsx
diff --git a/src/icons/Camera.jsx b/src/icons/Camera.jsx
diff --git a/src/icons/Camera.tsx b/src/icons/Camera.tsx
@@ -1,21 +1,8 @@
-import React from 'react';
+import styled from 'styled-components';
+import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';
+import { faCamera } from '@fortawesome/pro-regular-svg-icons';
+import { ReactNode } from 'react';
 
-const Camera = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 512 512"
-    {...props}
-  >
-    <path
-      d="M342.7 144H464v288H48V144h121.3l24-64h125.5l23.9 64zM324.3 32h-131c-20 0-37.9 12.4-44.9
-      31.1L136 96H48c-26.5 0-48 21.5-48 48v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5
-      48-48V144c0-26.5-21.5-48-48-48h-88l-14.3-38c-5.8-15.7-20.7-26-37.4-26zM256 408c-66.2
-      0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-192c-39.7
-      0-72 32.3-72 72s32.3 72 72 72 72-32.3 72-72-32.3-72-72-72z"
-    />
-  </svg>
-);
-
-export default Camera;
+export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faCamera })`
+  font-size: '${({ height = 'inherit' }) => height}';
+`;
diff --git a/src/icons/Category.jsx → src/icons/Category.tsx b/src/icons/Category.jsx → src/icons/Category.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Category = (props: React.SVGProps<SVGSVGElement>) => (
+const Svg = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
     width="100%"
     height="100%"
@@ -17,6 +17,6 @@ const Category = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default Category;
+export default Svg;
 
 export const backgroundImage = `url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' fill='%23D9E5FC'/%3E%3Cpath d='M28 21C28 20.4688 27.5312 20 27 20H22C21.4375 20 21 20.4688 21 21V26C21 26.5625 21.4375 27 22 27H27C27.5312 27 28 26.5625 28 26V21ZM14 19C11.7812 19 10 20.8125 10 23C10 25.2188 11.7812 27 14 27C16.1875 27 18 25.2188 18 23C18 20.8125 16.1875 19 14 19ZM26.9688 17C27.75 17 28.25 16.1875 27.8438 15.5L24.875 10.5C24.4688 9.84375 23.5 9.84375 23.0938 10.5L20.125 15.5C19.7188 16.1875 20.2188 17 21 17H26.9688Z' fill='white'/%3E%3C/svg%3E%0A");`;
diff --git a/src/icons/Check.jsx b/src/icons/Check.jsx
diff --git a/src/icons/Check.tsx b/src/icons/Check.tsx
@@ -1,20 +1,9 @@
-import React from 'react';
+import styled from 'styled-components';
 
-const Check = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 512 512"
-    {...props}
-  >
-    <path
-      d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284
-      28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686
-      16.971 0l299.813-299.813c4.686-4.686 4.686-12.284
-      0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"
-    />
-  </svg>
-);
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck } from '@fortawesome/pro-regular-svg-icons';
+import { ReactNode } from 'react';
 
-export default Check;
+export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCheck })`
+  font-size: ${({ height = 'inherit' }) => height};
+`;
diff --git a/src/icons/CheckCircle.jsx b/src/icons/CheckCircle.jsx
diff --git a/src/icons/CheckCircle.tsx b/src/icons/CheckCircle.tsx
@@ -1,24 +1,9 @@
-import React from 'react';
+import styled from 'styled-components';
 
-const CheckCircle = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 512 512"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0
-      48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200
-      0-110.532 89.451-200 200-200m140.204
-      130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346
-      303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705
-      4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736
-      16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"
-    />
-  </svg>
-);
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheckCircle } from '@fortawesome/pro-regular-svg-icons';
+import { ReactNode } from 'react';
 
-export default CheckCircle;
+export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCheckCircle })`
+  font-size: ${({ height = 'inherit' }) => height};
+`;
diff --git a/src/icons/ChevronDown.jsx b/src/icons/ChevronDown.jsx
diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx
@@ -1,20 +1,9 @@
-import React from 'react';
+import styled from 'styled-components';
 
-const ChevronDown = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100%"
-    height="100%"
-    viewBox="0 0 448 512"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17
-      0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7
-      4.7-12.3 0-17z"
-    />
-  </svg>
-);
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
+import { ReactNode } from 'react';
 
-export default ChevronDown;
+export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faChevronDown })`
+  font-size: ${({ height = 'inherit' }) => height};
+`;