reset src/icons

AmityCo · Dec 19, 2023 · aa311c7 · aa311c7
1 parent be81a99
commit aa311c7
Show file tree

Hide file tree

Showing 38 changed files with 776 additions and 227 deletions.
diff --git a/src/icons/ArrowLeft.js b/src/icons/ArrowLeft.js
@@ -1,8 +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';
+const Svg = (props) => (
+  <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: faArrowLeft })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default Svg;
diff --git a/src/icons/Ban.js b/src/icons/Ban.js
@@ -1,9 +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';
+const Svg = (props) => (
+  <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: faBan })`
-  color: ${({ theme }) => theme.palette.base.shade3};
-  font-size: ${({ height = 'inherit' }) => height};
+export default styled(Svg)`
+  fill: ${({ theme }) => theme.palette.base.shade3};
 `;
diff --git a/src/icons/Camera.js b/src/icons/Camera.js
@@ -1,7 +1,21 @@
-import styled from 'styled-components';
-import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';
-import { faCamera } from '@fortawesome/pro-regular-svg-icons';
+import React from 'react';
 
-export default styled(FaIcon).attrs({ icon: faCamera })`
-  font-size: '${({ height = 'inherit' }) => height}';
-`;
+const Svg = (props) => (
+  <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 Svg;
diff --git a/src/icons/Check.js b/src/icons/Check.js
@@ -1,8 +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';
+const Svg = (props) => (
+  <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: faCheck })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default Svg;
diff --git a/src/icons/CheckCircle.js b/src/icons/CheckCircle.js
@@ -1,8 +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';
+const Svg = (props) => (
+  <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: faCheckCircle })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default Svg;
diff --git a/src/icons/ChevronDown.js b/src/icons/ChevronDown.js
@@ -1,8 +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';
+const Svg = (props) => (
+  <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: faChevronDown })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default Svg;
diff --git a/src/icons/ChevronLeft.js b/src/icons/ChevronLeft.js
@@ -1,10 +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';
+const Svg = (props) => (
+  <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: faChevronLeft })`
-  && {
-    font-size: ${({ height = 'inherit' }) => height};
-  }
-`;
+export default Svg;
diff --git a/src/icons/ChevronRight.js b/src/icons/ChevronRight.js
@@ -1,10 +1,21 @@
-import styled from 'styled-components';
+import React from 'react';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
+const Svg = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 256 512"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908
+      437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971
+      0l209.414-209.414c4.686-4.686
+      4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"
+    />
+  </svg>
+);
 
-export default styled(FontAwesomeIcon).attrs({ icon: faChevronRight })`
-  && {
-    font-size: ${({ height = 'inherit' }) => height};
-  }
-`;
+export default Svg;
diff --git a/src/icons/Comment.js b/src/icons/Comment.js
@@ -1,8 +1,21 @@
-import styled from 'styled-components';
+import React from 'react';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCommentAlt } from '@fortawesome/pro-regular-svg-icons';
+const Svg = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0
+      4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2
+      16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8
+      0 16 7.2 16 16v288z"
+    />
+  </svg>
+);
 
-export default styled(FontAwesomeIcon).attrs({ icon: faCommentAlt })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default Svg;
diff --git a/src/icons/CreateChat.js b/src/icons/CreateChat.js
@@ -1,8 +1,23 @@
-import styled from 'styled-components';
+import React from 'react';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCommentAltPlus } from '@fortawesome/pro-regular-svg-icons';
+const Svg = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0
+      4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2
+      16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0
+      16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8
+      0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2
+      16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+    />
+  </svg>
+);
 
-export default styled(FontAwesomeIcon).attrs({ icon: faCommentAltPlus })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default Svg;
diff --git a/src/icons/EllipsisH.js b/src/icons/EllipsisH.js
@@ -1,7 +1,20 @@
-import styled from 'styled-components';
-import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';
-import { faEllipsisH } from '@fortawesome/pro-regular-svg-icons';
+import React from 'react';
 
-export default styled(FaIcon).attrs({ icon: faEllipsisH })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+const Svg = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48
+      48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336
+      0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z"
+    />
+  </svg>
+);
+
+export default Svg;
diff --git a/src/icons/EllipsisV.js b/src/icons/EllipsisV.js
@@ -1,7 +1,19 @@
-import styled from 'styled-components';
-import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';
-import { faEllipsisV } from '@fortawesome/pro-solid-svg-icons';
+import React from 'react';
 
-export default styled(FaIcon).attrs({ icon: faEllipsisV })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+const Svg = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 128 512"
+    {...props}
+  >
+    <path
+      d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16
+      104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5
+      21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"
+    />
+  </svg>
+);
+
+export default Svg;
diff --git a/src/icons/ExclamationCircle.js b/src/icons/ExclamationCircle.js
@@ -1,8 +1,24 @@
-import styled from 'styled-components';
+import React from 'react';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExclamationCircle } from '@fortawesome/pro-solid-svg-icons';
+const Svg = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504
+      119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200
+      110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm42-104c0 23.159-18.841 42-42
+      42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42zm-81.37-211.401l6.8 136c.319 6.387
+      5.591 11.401 11.985 11.401h41.17c6.394 0 11.666-5.014
+      11.985-11.401l6.8-136c.343-6.854-5.122-12.599-11.985-12.599h-54.77c-6.863 0-12.328
+      5.745-11.985 12.599z"
+    />
+  </svg>
+);
 
-export default styled(FontAwesomeIcon).attrs({ icon: faExclamationCircle })`
-  font-size: ${({ height = 'inherit' }) => height};
-`;
+export default Svg;