Merge pull request #87 from hufs-sports-live/refactor/icon

[REFACTOR]: Icon 컴포넌트 리팩토링
hufscheer · Nov 27, 2023 · d3b5128 · d3b5128
2 parents e6c177a + ffdbdd1
commit d3b5128
Show file tree

Hide file tree

Showing 24 changed files with 513 additions and 69 deletions.
diff --git a/src/components/common/Icon/IconMap.ts b/src/components/common/Icon/IconMap.ts
@@ -1,6 +1,35 @@
+import { BackgroundLogo } from './svg/BackgroundLogo';
+import { Calendar } from './svg/Calendar';
+import { CaretDown } from './svg/CaretDown';
+import { CaretUp } from './svg/CaretUp';
+import { Clip } from './svg/Clip';
+import { Cross } from './svg/Cross';
+import { HamburgerMenu } from './svg/HamburgerMenu';
+import { Hcc } from './svg/Hcc';
+import { Image } from './svg/Image';
+import { PaperPlane } from './svg/PaperPlane';
+import { Pencil } from './svg/Pencil';
+import { PlusCircled } from './svg/PlusCircled';
+import { Symbol } from './svg/Symbol';
+import { ThumbsUp } from './svg/Thumbsup';
+import { Trash } from './svg/Trash';
+import { Write } from './svg/Write';
+
 export const iconMap = {
-  hamburgerMenu:
-    'M3.75 17.25a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75ZM3.75 11.25a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75ZM3.75 5.25a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75Z',
-  cross: 'm7.757 16.243 8.486-8.486M16.243 16.243 7.757 7.757',
-  logo: 'M85.5606 195.998C77.732 198.97 68.9512 195.108 65.9441 187.377L57.1409 164.737C55.6563 165.736 54.0584 166.581 52.3706 167.248L95.2766 277.598C98.2837 285.337 94.377 294.018 86.5559 296.99L86.5635 296.998C78.7349 299.97 69.9541 296.108 66.947 288.377L2.01711 121.395C-0.989967 113.655 2.91677 104.975 10.7378 102.003C18.5664 99.0299 27.3472 102.892 30.354 110.624L34.2395 120.617C35.9024 119.988 37.6497 119.531 39.4597 119.266L1.01418 20.3946C-1.9929 12.6554 1.91384 3.97519 9.73489 1.00254C17.5635 -1.97012 26.3443 1.89218 29.3511 9.62363L94.2737 176.598C97.2808 184.337 93.374 193.018 85.553 195.99L85.5606 195.998Z',
+  backgroundLogo: BackgroundLogo,
+  calendar: Calendar,
+  caretDown: CaretDown,
+  caretUp: CaretUp,
+  clip: Clip,
+  cross: Cross,
+  hamburgerMenu: HamburgerMenu,
+  hcc: Hcc,
+  image: Image,
+  paperPlane: PaperPlane,
+  pencil: Pencil,
+  plusCircled: PlusCircled,
+  symbol: Symbol,
+  thumbsUp: ThumbsUp,
+  trash: Trash,
+  write: Write,
 };
diff --git a/src/components/common/Icon/icon.type.ts b/src/components/common/Icon/icon.type.ts
@@ -1,3 +1,3 @@
-import { iconMap } from '@/components/common/Icon/IconMap';
+import { iconMap } from '@/components/common/Icon/iconMap';
 
 export type IconName = keyof typeof iconMap;
diff --git a/src/components/common/Icon/iconMap.ts b/src/components/common/Icon/iconMap.ts
@@ -0,0 +1,35 @@
+import { BackgroundLogo } from './svg/BackgroundLogo';
+import { Calendar } from './svg/Calendar';
+import { CaretDown } from './svg/CaretDown';
+import { CaretUp } from './svg/CaretUp';
+import { Clip } from './svg/Clip';
+import { Cross } from './svg/Cross';
+import { HamburgerMenu } from './svg/HamburgerMenu';
+import { Hcc } from './svg/Hcc';
+import { Image } from './svg/Image';
+import { PaperPlane } from './svg/PaperPlane';
+import { Pencil } from './svg/Pencil';
+import { PlusCircled } from './svg/PlusCircled';
+import { Symbol } from './svg/Symbol';
+import { ThumbsUp } from './svg/Thumbsup';
+import { Trash } from './svg/Trash';
+import { Write } from './svg/Write';
+
+export const iconMap = {
+  backgroundLogo: BackgroundLogo,
+  calendar: Calendar,
+  caretDown: CaretDown,
+  caretUp: CaretUp,
+  clip: Clip,
+  cross: Cross,
+  hamburgerMenu: HamburgerMenu,
+  hcc: Hcc,
+  image: Image,
+  paperPlane: PaperPlane,
+  pencil: Pencil,
+  plusCircled: PlusCircled,
+  symbol: Symbol,
+  thumbsUp: ThumbsUp,
+  trash: Trash,
+  write: Write,
+};
diff --git a/src/components/common/Icon/index.tsx b/src/components/common/Icon/index.tsx
@@ -1,9 +1,7 @@
 import { ComponentProps } from 'react';
 
-import { $ } from '@/utils/core';
-
 import { IconName } from './icon.type';
-import { iconMap } from './IconMap';
+import { iconMap } from './iconMap';
 
 interface IconProps extends ComponentProps<'svg'> {
   iconName: IconName;
@@ -13,21 +11,8 @@ export const Icon = ({
   iconName,
   width = 24,
   height = 24,
-  className,
   ...props
 }: IconProps) => {
-  const path = iconMap[iconName];
-  return (
-    <svg
-      width={width}
-      height={height}
-      fillRule="evenodd"
-      clipRule="evenodd"
-      xmlns="http://www.w3.org/2000/svg"
-      className={$(className)}
-      {...props}
-    >
-      <path d={path} />
-    </svg>
-  );
+  const IconComponent = iconMap[iconName];
+  return <IconComponent width={width} height={height} {...props} />;
 };
diff --git a/src/components/common/Icon/svg/BackgroundLogo.tsx b/src/components/common/Icon/svg/BackgroundLogo.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export const BackgroundLogo = ({
+  viewBox = '0 0 97 298',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M85.5606 195.998C77.732 198.97 68.9512 195.108 65.9441 187.377L57.1409 164.737C55.6563 165.736 54.0584 166.581 52.3706 167.248L95.2766 277.598C98.2837 285.337 94.377 294.018 86.5559 296.99L86.5635 296.998C78.7349 299.97 69.9541 296.108 66.947 288.377L2.01711 121.395C-0.989967 113.655 2.91677 104.975 10.7378 102.003C18.5664 99.0299 27.3472 102.892 30.354 110.624L34.2395 120.617C35.9024 119.988 37.6497 119.531 39.4597 119.266L1.01418 20.3946C-1.9929 12.6554 1.91384 3.97519 9.73489 1.00254C17.5635 -1.97012 26.3443 1.89218 29.3511 9.62363L94.2737 176.598C97.2808 184.337 93.374 193.018 85.553 195.99L85.5606 195.998Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/Icon/svg/Calendar.tsx b/src/components/common/Icon/svg/Calendar.tsx
@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+
+export const Calendar = ({
+  viewBox = '0 0 8 10',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.2 1.52228H6.8V0.704102H6V1.52228H2V0.704102H1.2V1.52228H0.8C0.36 1.52228 0 1.89047 0 2.34047V8.88592C0 9.33592 0.36 9.7041 0.8 9.7041H7.2C7.64 9.7041 8 9.33592 8 8.88592V2.34047C8 1.89047 7.64 1.52228 7.2 1.52228ZM7.2 8.88592H0.8V3.56774H7.2V8.88592Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/Icon/svg/CaretDown.tsx b/src/components/common/Icon/svg/CaretDown.tsx
@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+
+export const CaretDown = ({
+  viewBox = '0 0 15 15',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg viewBox={viewBox} xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/Icon/svg/CaretUp.tsx b/src/components/common/Icon/svg/CaretUp.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export const CaretUp = ({
+  viewBox = '0 0 15 15',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.18179 8.81819C4.00605 8.64245 4.00605 8.35753 4.18179 8.18179L7.18179 5.18179C7.26618 5.0974 7.38064 5.04999 7.49999 5.04999C7.61933 5.04999 7.73379 5.0974 7.81819 5.18179L10.8182 8.18179C10.9939 8.35753 10.9939 8.64245 10.8182 8.81819C10.6424 8.99392 10.3575 8.99392 10.1818 8.81819L7.49999 6.13638L4.81819 8.81819C4.64245 8.99392 4.35753 8.99392 4.18179 8.81819Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/Icon/svg/Clip.tsx b/src/components/common/Icon/svg/Clip.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export const Clip = ({
+  viewBox = '0 0 16 19',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.0164 8.49274L7.79442 15.7148C6.40654 17.1026 4.15829 17.1026 2.77041 15.7148C1.38253 14.3269 1.38253 12.0786 2.77041 10.6907L10.6204 2.84073C11.4871 1.97408 12.8938 1.97408 13.7604 2.84073C14.6271 3.70737 14.6271 5.11409 13.7604 5.98073L7.16642 12.5747C6.82102 12.9201 6.25582 12.9201 5.91042 12.5747C5.56502 12.2293 5.56502 11.6641 5.91042 11.3187L11.8764 5.35273L10.9344 4.41073L4.96841 10.3767C4.10177 11.2434 4.10177 12.6501 4.96841 13.5167C5.83506 14.3834 7.24178 14.3834 8.10842 13.5167L14.7024 6.92273C16.0903 5.53485 16.0903 3.28661 14.7024 1.89872C13.3146 0.510841 11.0663 0.510841 9.67842 1.89872L1.82841 9.74874C-0.0807147 11.6579 -0.0807152 14.7476 1.82841 16.6568C3.73753 18.5659 6.8273 18.5659 8.73642 16.6568L15.9584 9.43474L15.0164 8.49274Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/Icon/svg/Cross.tsx b/src/components/common/Icon/svg/Cross.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export const Cross = ({
+  viewBox = '0 0 15 15',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/Icon/svg/HamburgerMenu.tsx b/src/components/common/Icon/svg/HamburgerMenu.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export const HamburgerMenu = ({
+  viewBox = '0 0 15 15',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/Icon/svg/Hcc.tsx b/src/components/common/Icon/svg/Hcc.tsx
@@ -0,0 +1,34 @@
+import { ComponentProps } from 'react';
+
+export const Hcc = ({
+  viewBox = '0 0 2173 1549',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M683.262 926.137c-13.692-35.617-53.653-53.403-89.258-39.707L44.309 1097.258c-35.614 13.695-53.38 53.676-39.7 89.293 13.692 35.625 53.653 53.402 89.266 39.707l.05-.024 219.985-84.039c13.856-5.328 29.399 1.59 34.727 15.45 5.332 13.859 31.933 83.113 31.933 83.113l15.618 40.629c11.453 29.82 43.687 45.48 73.812 36.879.68-.196 1.355-.45 2.031-.668 1.25-.399 2.504-.805 3.739-1.29 1-.398 1.957-.855 2.925-1.3.907-.41 1.828-.809 2.715-1.258.945-.488 1.836-1.043 2.75-1.574.84-.496 1.703-.969 2.512-1.492.879-.57 1.71-1.204 2.55-1.817.778-.57 1.575-1.11 2.325-1.71.8-.653 1.558-1.352 2.332-2.032.703-.633 1.437-1.238 2.121-1.898.734-.72 1.41-1.5 2.113-2.25.637-.692 1.297-1.36 1.899-2.07.668-.79 1.258-1.63 1.879-2.446.554-.734 1.148-1.461 1.671-2.219.586-.847 1.106-1.734 1.645-2.613.488-.785.996-1.543 1.445-2.352.512-.902.938-1.847 1.395-2.77.398-.816.832-1.62 1.207-2.452.422-.953.758-1.934 1.133-2.91.324-.848.675-1.68.968-2.536.329-.996.575-2.023.852-3.035.234-.863.512-1.719.715-2.605.23-1.028.383-2.082.57-3.125.149-.887.344-1.758.465-2.657.133-1.082.188-2.175.27-3.261.058-.88.171-1.742.203-2.617.035-1.133-.024-2.282-.055-3.422-.023-.848 0-1.688-.05-2.543-.083-1.184-.263-2.383-.423-3.578-.097-.801-.148-1.606-.285-2.407-.222-1.336-.554-2.671-.875-4.004-.152-.656-.258-1.308-.43-1.968a62.511 62.511 0 0 0-1.933-5.914l-47.547-123.743c-5.324-13.859 1.59-29.418 15.445-34.742l165.309-63.566c35.605-13.695 53.375-53.672 39.691-89.29m-472.12-67.78c-2.716-7.059.812-14.989 7.866-17.704l52.008-19.996c7.055-2.715 14.973.813 17.688 7.868 2.715 7.058-.809 14.988-7.867 17.695l-52.016 20.004c-7.055 2.715-14.973-.813-17.688-7.867m34.309 120.582 98.523-37.883c64.352-24.746 96.465-96.996 71.73-161.364-24.733-64.375-96.948-96.5-161.3-71.757l-98.523 37.886c-64.352 24.743-96.461 96.985-71.727 161.36 24.73 64.37 96.95 96.5 161.297 71.758"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m762.398 1326.074-84.707-220.469c-12.851-33.433-50.359-50.125-83.785-37.27-33.422 12.856-50.101 50.384-37.254 83.817l6.875 17.907c5.153 13.41-1.535 28.457-14.941 33.617l-174.043 66.926c-16.527 6.351-35.074-1.899-41.434-18.438l-3.851-10.043c-13.176-34.277-52.395-52.601-86.395-38.785-32.972 13.394-49.293 50.809-36.46 84.191l84.242 219.258c12.98 33.774 50.863 50.63 84.617 37.645 2.547-.98 4.976-2.153 7.332-3.407 2.668-.671 5.324-1.46 7.96-2.472l326.38-125.504c1.386-.531 2.699-1.172 4.035-1.785 1.394-.434 2.793-.84 4.183-1.371 33.422-12.856 50.102-50.375 37.254-83.817m-157.484-1.472L400.16 1403.34c-6.922 2.664-15.113-.14-18.137-6.914-3.214-7.223.301-15.57 7.579-18.375l204.765-78.738c6.918-2.657 15.113.14 18.133 6.914 3.227 7.222-.297 15.578-7.578 18.375M259.824 529.48c-10.219 3.934-21.691-1.168-25.62-11.39l-24.556-63.91c-15.039-39.137-58.941-58.668-98.07-43.625-39.125 15.047-58.644 58.968-43.605 98.113l16.734 43.562 9.512 24.758c2.992 7.785-.89 16.532-8.672 19.524l-.113.047-1.621.62c-31.481 12.106-49.551 43.848-45.801 75.891.066.582.12 1.176.21 1.77.196 1.469.489 2.933.786 4.402.219 1.02.414 2.04.668 3.059.3 1.207.668 2.402 1.035 3.601.234.758.398 1.524.66 2.282.14.41.328.793.48 1.199.149.426.254.847.41 1.273.317.82.716 1.574 1.051 2.371.473 1.102.938 2.22 1.461 3.285.563 1.165 1.18 2.282 1.801 3.399.57 1.035 1.125 2.07 1.739 3.059a61.487 61.487 0 0 0 2.109 3.152c.652.95 1.305 1.91 2.008 2.82.765.988 1.574 1.934 2.383 2.887.742.871 1.468 1.746 2.242 2.57.855.91 1.754 1.758 2.656 2.621.809.778 1.61 1.575 2.45 2.309.929.816 1.913 1.566 2.886 2.332.879.691 1.738 1.394 2.648 2.047 1.012.722 2.055 1.375 3.094 2.035.93.59 1.852 1.215 2.813 1.77 1.074.62 2.183 1.167 3.285 1.722.98.496 1.949 1.028 2.953 1.48 1.133.516 2.3.95 3.457 1.41 1.012.395 2.023.833 3.05 1.184 1.192.414 2.415.727 3.622 1.078 1.043.301 2.062.633 3.12.88 1.235.292 2.505.495 3.763.726 1.058.195 2.105.43 3.171.57 1.29.172 2.594.258 3.899.36 1.058.086 2.105.218 3.156.265 1.356.051 2.715-.008 4.07-.039 1.028-.023 2.047.008 3.082-.05 1.434-.09 2.864-.301 4.29-.473.968-.114 1.925-.176 2.894-.332 1.59-.262 3.172-.653 4.746-1.028.8-.187 1.617-.316 2.43-.53a73.634 73.634 0 0 0 7.113-2.321L419.52 623.078c37.27-14.332 55.87-56.176 41.55-93.46-14.328-37.294-56.156-55.9-93.433-41.567M1750.96 886.41c-39.129 15.042-83.031-4.485-98.07-43.63l-66.993-174.355c-15.039-39.137 4.485-83.059 43.606-98.106 39.121-15.043 83.035 4.489 98.066 43.63l66.996 174.347c15.036 39.137-4.488 83.058-43.609 98.105"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1704.598 378.434c-16.118-37.88-60.317-55.18-98.735-40.407l-72.894 28.032c-15.184 5.84-32.235-1.75-38.067-16.938l-59.273-154.254c-15.031-39.144-58.945-58.672-98.066-43.629-39.122 15.047-58.653 58.969-43.614 98.114l59.274 154.257c5.843 15.192-1.746 32.239-16.926 38.082l-42.52 16.352c-39.12 15.035-58.644 58.965-43.605 98.102 15.039 39.144 58.945 58.668 98.074 43.625 11.457-4.407 24.309 1.32 28.715 12.777l80.531 209.59c14.762 38.433 57.203 59.676 96.125 46.277 40.852-14.062 61.582-59.055 46.211-99.055l-78.586-204.535c-5.84-15.187 1.738-32.238 16.93-38.078l123.863-47.629c39.977-15.367 59.492-60.91 42.57-100.676m-337.25 805.258c-39.128 15.047-83.03-4.484-98.07-43.629L944.711 295.344c-15.031-39.137 4.492-83.067 43.613-98.114 39.13-15.042 83.028 4.493 98.074 43.63l324.57 844.73c15.036 39.137-4.488 83.058-43.613 98.101m654.954-332.535c-39.13 15.047-83.032-4.484-98.075-43.629l-270.558-704.156c-15.04-39.144 4.484-83.058 43.605-98.113 39.13-15.043 83.035 4.496 98.074 43.633l270.56 704.156c15.03 39.137-4.493 83.058-43.614 98.101m-941.578 87.664L969.32 648.868c-3.578-9.293-1.18-20.02 6.426-26.441.84-.703 1.61-1.461 2.414-2.203.5-.465 1.031-.918 1.528-1.395 1.523-1.488 3-3.015 4.386-4.613a77.002 77.002 0 0 0 3.93-4.957c.402-.559.77-1.133 1.16-1.696a74.068 74.068 0 0 0 2.356-3.57c.418-.683.8-1.383 1.199-2.07a80.994 80.994 0 0 0 1.875-3.488c.367-.735.726-1.477 1.07-2.223a86.58 86.58 0 0 0 1.555-3.629c.297-.742.597-1.477.875-2.227a75.756 75.756 0 0 0 1.328-4.058c.195-.652.418-1.297.598-1.957a74.714 74.714 0 0 0 1.425-6.153c.383-2.066.668-4.16.88-6.269.066-.68.09-1.371.132-2.055.106-1.437.195-2.879.219-4.328a84.38 84.38 0 0 0-.024-2.43 81.947 81.947 0 0 0-.164-4.035 74.39 74.39 0 0 0-.773-6.578c-.133-.816-.254-1.64-.418-2.453a79.847 79.847 0 0 0-1.008-4.363c-.18-.692-.32-1.395-.523-2.086a76.955 76.955 0 0 0-2.121-6.39c-15.04-39.138-58.946-58.669-98.075-43.622l-59.14 22.735c-18.383 7.07-39-2.11-46.07-20.493l-58.145-151.312c-15.031-39.145-58.942-58.676-98.063-43.63-39.125 15.048-58.652 58.97-43.613 98.106l23.316 60.684 34.825 90.637c7.062 18.39-2.106 39.015-20.48 46.09l-99.794 38.675c-39.12 15.04-58.652 58.97-43.613 98.106 15.043 39.144 58.945 58.676 98.066 43.629l38.567-15.125c12.32-4.742 26.136 1.418 30.867 13.73l79.332 206.465c15.04 39.145 58.945 58.676 98.074 43.629 39.13-15.047 58.645-58.969 43.614-98.106l-81.805-212.921c-3.367-8.75 1.004-18.579 9.762-21.946 8.746-3.367 18.578 1.008 21.937 9.758l111.816 291.024c15.04 39.136 58.95 58.667 98.075 43.62 39.129-15.046 58.652-58.968 43.609-98.113m1009.672-.383c-45.629 0-82.621 37.008-82.621 82.657 0 45.644 36.992 82.652 82.62 82.652 45.63 0 82.622-37.008 82.622-82.652 0-45.649-36.992-82.657-82.621-82.657m-995.164 158.305c-45.63 0-82.621 37.008-82.621 82.653 0 45.648 36.992 82.656 82.62 82.656 45.63 0 82.622-37.008 82.622-82.656 0-45.645-36.992-82.653-82.621-82.653"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/Icon/svg/Image.tsx b/src/components/common/Icon/svg/Image.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export const Image = ({
+  viewBox = '0 0 48 48',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48 42.6667V5.33333C48 2.4 45.6 0 42.6667 0H5.33333C2.4 0 0 2.4 0 5.33333V42.6667C0 45.6 2.4 48 5.33333 48H42.6667C45.6 48 48 45.6 48 42.6667ZM14.6667 28L21.3333 36.0267L30.6667 24L42.6667 40H5.33333L14.6667 28Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/common/Icon/svg/PaperPlane.tsx b/src/components/common/Icon/svg/PaperPlane.tsx
@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+
+export const PaperPlane = ({
+  viewBox = '0 0 15 15',
+  ...props
+}: ComponentProps<'svg'>) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.20308 1.04312C1.00481 0.954998 0.772341 1.0048 0.627577 1.16641C0.482813 1.32802 0.458794 1.56455 0.568117 1.75196L3.92115 7.50002L0.568117 13.2481C0.458794 13.4355 0.482813 13.672 0.627577 13.8336C0.772341 13.9952 1.00481 14.045 1.20308 13.9569L14.7031 7.95693C14.8836 7.87668 15 7.69762 15 7.50002C15 7.30243 14.8836 7.12337 14.7031 7.04312L1.20308 1.04312ZM4.84553 7.10002L2.21234 2.586L13.2689 7.50002L2.21234 12.414L4.84552 7.90002H9C9.22092 7.90002 9.4 7.72094 9.4 7.50002C9.4 7.27911 9.22092 7.10002 9 7.10002H4.84553Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};