From 2b78cab849bae68a5541534af656e488ce05489b Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Mon, 19 Feb 2024 21:15:51 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20custom=20?=
 =?UTF-8?q?icon=20and=20plus=20icon=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/CustomIcon/CustomIcon.tsx          | 30 +++++++++++++++++++
 .../components/shared/CustomIcon/PlusIcon.tsx | 21 +++++++++++++
 .../components/shared/CustomIcon/README.md    | 24 +++++++++++++++
 .../src/components/shared/CustomIcon/index.ts |  2 ++
 4 files changed, 77 insertions(+)
 create mode 100644 packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx
 create mode 100644 packages/frontend/src/components/shared/CustomIcon/PlusIcon.tsx
 create mode 100644 packages/frontend/src/components/shared/CustomIcon/README.md
 create mode 100644 packages/frontend/src/components/shared/CustomIcon/index.ts

diff --git a/packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx
new file mode 100644
index 00000000..6b32bb73
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx
@@ -0,0 +1,30 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+
+export interface CustomIconProps extends ComponentPropsWithoutRef<'svg'> {
+  size?: number | string; // width and height will both be set as the same value
+  name?: string;
+}
+
+export const CustomIcon = ({
+  children,
+  width = 24,
+  height = 24,
+  size,
+  viewBox = '0 0 24 24',
+  name,
+  ...rest
+}: CustomIconProps) => {
+  return (
+    <svg
+      aria-labelledby={name}
+      height={size || height}
+      role="presentation"
+      viewBox={viewBox}
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      {children}
+    </svg>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/PlusIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/PlusIcon.tsx
new file mode 100644
index 00000000..da4b1ee0
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/PlusIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const PlusIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.66666 9.99999C1.66666 5.39762 5.39762 1.66666 9.99999 1.66666C14.6024 1.66666 18.3333 5.39762 18.3333 9.99999C18.3333 14.6024 14.6024 18.3333 9.99999 18.3333C5.39762 18.3333 1.66666 14.6024 1.66666 9.99999ZM10.625 6.46483C10.625 6.11966 10.3452 5.83983 9.99999 5.83983C9.65481 5.83983 9.37499 6.11966 9.37499 6.46483V9.37537H6.46446C6.11928 9.37537 5.83946 9.65519 5.83946 10.0004C5.83946 10.3455 6.11928 10.6254 6.46446 10.6254H9.37499V13.5359C9.37499 13.8811 9.65481 14.1609 9.99999 14.1609C10.3452 14.1609 10.625 13.8811 10.625 13.5359V10.6254H13.5355C13.8807 10.6254 14.1605 10.3455 14.1605 10.0004C14.1605 9.65519 13.8807 9.37537 13.5355 9.37537H10.625V6.46483Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/README.md b/packages/frontend/src/components/shared/CustomIcon/README.md
new file mode 100644
index 00000000..d7e8b3d1
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/README.md
@@ -0,0 +1,24 @@
+# 1. What icons are compatible with this component?
+
+- Viewbox "0 0 24 24": From where you're exporting from, please make sure the icon is using viewBox="0 0 24 24" before downloading/exporting. Not doing so will result in incorrect icon scaling
+
+# 2. How to add a new icon?
+
+**2.1 Sanitising the icon**
+
+1. Duplicate a current icon e.g. CrossIcon and rename it accordingly.
+2. Rename the function inside the new file you duplicated too
+3. Replace the markup with your SVG markup (make sure it complies with the above section's rule)
+4. Depending on the svg you pasted...
+   A. If the `<svg>` has only 1 child, remove the `<svg>` parent entirely so you only have the path left
+   B. If your component has more than 1 paths, rename `<svg>` tag with the `<g>` tag. Then, remove all attributes of this `<g>` tag so that it's just `<g>`
+5. Usually, icons are single colored. If that's the case, replace all fill/stroke color with `currentColor`. E.g. <path d="..." fill="currentColor">. Leave the other attributes without removing them.
+6. If your icon has more than one colour, then it's up to you to decide whether we want to use tailwind to help set the fill and stroke colors
+7. Lastly, export your icon in `index.ts` by following what was done for CrossIcon
+8. Make sure to provide a name to the `<CustomIcon>` component for accessibility sake
+9. Done!
+
+**2.3 Use your newly imported icon**
+
+1. You can change simply use `<BellIcon size="32" />` to quickly change both width and height with the same value (square). For custom viewBox, width and height, simply provide all three props.
+2. Coloring the icon: Simply add a className with text color. E.g. `<BellIcon className="text-gray-500" />`
diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts
new file mode 100644
index 00000000..d50d942c
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/index.ts
@@ -0,0 +1,2 @@
+export * from './PlusIcon';
+export * from './CustomIcon';