fix: update icons

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

Hide file tree

Showing 66 changed files with 1,117 additions and 314 deletions.
diff --git a/src/chat/components/ChatHeader/styles.tsx b/src/chat/components/ChatHeader/styles.tsx
@@ -1,14 +1,11 @@
 import styled from 'styled-components';
-import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';
-import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { ReactNode } from 'react';
+import { BarsIcon } from '~/icons';
 
-export const DetailsIcon = styled(FaIcon).attrs<{ icon?: ReactNode }>({
-  icon: faBars,
-  width: 16,
-  height: 16,
+export const DetailsIcon = styled(BarsIcon).attrs<{ icon?: ReactNode }>({
+  width: 24,
+  height: 24,
 })`
-  font-size: 16px;
   cursor: pointer;
   fill: ${({ theme }) => theme.palette.neutral.main};
   align-self: center;

diff --git a/src/icons/Add.tsx b/src/icons/Add.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+function Icon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="none"
+      viewBox="0 0 16 16"
+      {...props}
+    >
+      <circle cx="8" cy="8" r="7.25" fill="#1054DE" stroke="#fff" strokeWidth="1.5"></circle>
+      <path
+        fill="#fff"
+        d="M11.438 7.625c.156 0 .312.156.312.313v.625a.321.321 0 01-.313.312H8.626v2.813a.321.321 0 01-.313.312h-.624a.308.308 0 01-.313-.313V8.876H4.562a.309.309 0 01-.312-.313v-.624c0-.157.137-.313.313-.313h2.812V4.812c0-.156.137-.312.313-.312h.625c.156 0 .312.156.312.313v2.812h2.813z"
+      ></path>
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/src/icons/ArrowLeft.tsx b/src/icons/ArrowLeft.tsx
@@ -1,9 +1,22 @@
-import styled from 'styled-components';
+import React from 'react';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft } from '@fortawesome/pro-regular-svg-icons';
-import { ReactNode } from 'react';
+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>
+);
 
-export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faArrowLeft })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default ArrowLeft;
diff --git a/src/icons/ArrowLeftCircle.tsx b/src/icons/ArrowLeftCircle.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Icon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" {...props}>
+      <path
+        fill="#fff"
+        d="M16 27.91c-6.422 0-11.625-5.202-11.625-11.624C4.375 9.864 9.578 4.66 16 4.66s11.625 5.203 11.625 11.625S22.422 27.91 16 27.91zm-5.344-10.827l6.328 6.375c.47.422 1.172.422 1.594 0l.797-.797c.422-.422.422-1.172 0-1.594l-4.781-4.781 4.781-4.735c.422-.468.422-1.171 0-1.593l-.797-.797c-.422-.422-1.172-.422-1.594 0l-6.328 6.328c-.469.469-.469 1.172 0 1.594z"
+        opacity="0.7"
+      ></path>
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/src/icons/ArrowLeftCircle2.tsx b/src/icons/ArrowLeftCircle2.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+function Icon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      fill="none"
+      viewBox="0 0 32 32"
+      {...props}
+    >
+      <circle cx="16" cy="16" r="16" fill="#000" fillOpacity="0.5"></circle>
+      <path
+        fill="#fff"
+        d="M16.176 23.914c-.14.176-.422.176-.598 0L8.23 16.566a.405.405 0 010-.597l7.348-7.348c.176-.176.457-.176.598 0l.703.668c.176.176.176.457 0 .598l-5.45 5.449h12.024c.211 0 .422.21.422.422v.984c0 .246-.21.422-.422.422H11.43l5.449 5.484c.176.141.176.422 0 .598l-.703.668z"
+      ></path>
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/src/icons/ArrowRight.tsx b/src/icons/ArrowRight.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Svg = (props: React.SVGProps<SVGSVGElement>) => (
+const ArrowRight = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
     width="100%"
     height="100%"
@@ -16,6 +16,6 @@ const Svg = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default Svg;
+export default ArrowRight;
 
 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/ArrowRightCircle.tsx b/src/icons/ArrowRightCircle.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Icon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" {...props}>
+      <path
+        fill="#fff"
+        d="M16 4.66c6.422 0 11.625 5.204 11.625 11.626S22.422 27.91 16 27.91 4.375 22.708 4.375 16.286 9.578 4.66 16 4.66zm5.297 10.829L14.969 9.16c-.422-.422-1.172-.422-1.594 0l-.797.797c-.422.421-.422 1.171 0 1.593l4.781 4.735-4.78 4.781c-.423.422-.423 1.172 0 1.594l.796.797c.422.422 1.172.422 1.594 0l6.328-6.375c.469-.422.469-1.125 0-1.594z"
+        opacity="0.7"
+      ></path>
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/src/icons/Balloon.tsx b/src/icons/Balloon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Svg = (props: React.SVGProps<SVGSVGElement>) => (
+const Balloon = (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 Svg = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default Svg;
+export default Balloon;
 
 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.tsx b/src/icons/Ban.tsx
@@ -1,10 +1,24 @@
+import React from 'react';
 import styled from 'styled-components';
 
-import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';
-import { faBan } from '@fortawesome/pro-regular-svg-icons';
-import { ReactNode } from 'react';
+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>
+);
 
-export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faBan })`
-  color: ${({ theme }) => theme.palette.base.shade3};
-  font-size: ${({ height = 'inherit' }) => height};
+export default styled(Ban)`
+  fill: ${({ theme }) => theme.palette.base.shade3};
 `;
diff --git a/src/icons/Bars.tsx b/src/icons/Bars.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+function Icon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="#292B32"
+        d="M19.453 7.61H4.547a.406.406 0 01-.422-.423V6.063c0-.21.176-.421.422-.421h14.906c.211 0 .422.21.422.421v1.125c0 .247-.21.422-.422.422zm0 5.624H4.547a.406.406 0 01-.422-.421v-1.126c0-.21.176-.421.422-.421h14.906c.211 0 .422.21.422.421v1.126c0 .246-.21.421-.422.421zm0 5.625H4.547a.406.406 0 01-.422-.422v-1.125c0-.21.176-.421.422-.421h14.906c.211 0 .422.21.422.422v1.125c0 .246-.21.421-.422.421z"
+      ></path>
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/src/icons/Camera.tsx b/src/icons/Camera.tsx
@@ -1,8 +1,21 @@
-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';
+import React from 'react';
 
-export default styled(FaIcon).attrs<{ icon?: ReactNode }>({ icon: faCamera })`
-  font-size: '${({ height = 'inherit' }) => height}';
-`;
+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;
diff --git a/src/icons/Category.tsx b/src/icons/Category.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Svg = (props: React.SVGProps<SVGSVGElement>) => (
+const Category = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
     width="100%"
     height="100%"
@@ -17,6 +17,6 @@ const Svg = (props: React.SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default Svg;
+export default Category;
 
 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.tsx b/src/icons/Check.tsx
@@ -1,9 +1,20 @@
-import styled from 'styled-components';
+import React from 'react';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck } from '@fortawesome/pro-regular-svg-icons';
-import { ReactNode } from 'react';
+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>
+);
 
-export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCheck })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default Check;
diff --git a/src/icons/CheckCircle.tsx b/src/icons/CheckCircle.tsx
@@ -1,9 +1,24 @@
-import styled from 'styled-components';
+import React from 'react';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheckCircle } from '@fortawesome/pro-regular-svg-icons';
-import { ReactNode } from 'react';
+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>
+);
 
-export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faCheckCircle })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default CheckCircle;
diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx
@@ -1,9 +1,20 @@
-import styled from 'styled-components';
+import React from 'react';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
-import { ReactNode } from 'react';
+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>
+);
 
-export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faChevronDown })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default ChevronDown;
diff --git a/src/icons/ChevronLeft.tsx b/src/icons/ChevronLeft.tsx
@@ -1,11 +1,21 @@
-import styled from 'styled-components';
+import React from 'react';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronLeft } from '@fortawesome/pro-regular-svg-icons';
-import { ReactNode } from 'react';
+const ChevronLeft = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 256 512"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092
+      74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971
+      0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285
+      4.686 16.971-.001z"
+    />
+  </svg>
+);
 
-export default styled(FontAwesomeIcon).attrs<{ icon?: ReactNode }>({ icon: faChevronLeft })`
-  && {
-    font-size: ${({ height = 'inherit' }) => height};
-  }
-`;
+export default ChevronLeft;