Merge pull request #25 from depromeet/feature/11/icon-component

Feature/11/icon component

src/app/MainPage.tsx

@@ -4,6 +4,7 @@ import { useAtom } from "jotai";
 import { messageAtom } from "@/store/messageAtom.tsx";
 import Modal from "@/component/common/modal/Modal";
 import useModal from "@/hooks/useModal";
+import Icon from "@/component/common/Icon/Icon";
 
 function MainPage() {
   const [message] = useAtom(messageAtom);
@@ -15,6 +16,12 @@ function MainPage() {
         <span>welcome to layer 🎇</span>
         <div onClick={() => open({ title: "냠냠", content: "쩝쩝", callBack: () => console.log("확인") })}>{message}</div>
       </div>
+
+      <Icon icon="ic_back" color="red" size={5} onClick={() => console.log("클릭")} />
+      <Icon icon="ic_back" color={"rgba(0,0,0,0.6)"} size={2} />
+      <Icon icon="ic_back" color="#00ff00" size={4} />
+      <Icon icon="ic_check" color="black" size={4} />
+
       <Modal />
     </>
   );

src/assets/svgs/common/index.ts

@@ -0,0 +1,2 @@
+export { default as ic_back } from "./ic_back.svg?react";
+export { default as ic_check } from "./ic_check.svg?react";

src/assets/svgs/index.ts

@@ -0,0 +1,2 @@
+export * from "./common";
+export * from "./toast";

src/assets/svgs/toast/index.ts

@@ -0,0 +1 @@
+export { default as ic_success } from "./ic_success.svg?react";

src/component/common/Icon/Icon.tsx

@@ -0,0 +1,34 @@
+import { memo } from "react";
+
+import * as icons from "@/assets/svgs";
+import { css } from "@emotion/react";
+
+type IconType = keyof typeof icons;
+
+type Props = {
+  icon: IconType;
+  color?: string;
+  size?: string | number;
+  onClick?: () => void;
+};
+
+const DEFAULT_ICON_COLOR = "#000000";
+
+function Icon({ icon, color = DEFAULT_ICON_COLOR, size = "0.2rem", onClick }: Props) {
+  const SVGIcon = icons[icon];
+  const widthRem = typeof size === "number" ? `${size}rem` : size;
+
+  return (
+    <SVGIcon
+      onClick={onClick}
+      css={css`
+        color: ${color};
+        cursor: ${onClick ? "pointer" : "default"};
+        width: ${widthRem};
+        height: auto;
+      `}
+    />
+  );
+}
+
+export default memo(Icon);

src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const value: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default value;
+}