Merge pull request #65 from hufs-sports-live/feat/icon

[FEAT] icon 컴포넌트 생성

package.json

@@ -10,7 +10,7 @@
     "prepare": "chmod ug+x .husky/* && husky install"
   },
   "lint-staged": {
-    "**/*.{js, jsx, ts, tsx}": [
+    "**/*.{js,jsx,ts,tsx}": [
       "eslint",
       "prettier --config ./.prettierrc --write -u"
     ]

src/components/common/Icon/IconMap.ts

@@ -0,0 +1,5 @@
+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',
+};

src/components/common/Icon/icon.type.ts

@@ -0,0 +1,3 @@
+import { iconMap } from '@/components/common/Icon/IconMap';
+
+export type IconName = keyof typeof iconMap;

src/components/common/Icon/index.tsx

@@ -0,0 +1,33 @@
+import { ComponentProps } from 'react';
+
+import { $ } from '@/utils/core';
+
+import { IconName } from './icon.type';
+import { iconMap } from './IconMap';
+
+interface IconProps extends ComponentProps<'svg'> {
+  iconName: IconName;
+}
+
+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>
+  );
+};