[#8] Feat: Icon 컴포넌트 구현 (#11)

src/app/page.tsx

@@ -1,5 +1,19 @@
+'use client';
+
+import Icon from '../components/Icon';
+
 const Home = () => {
-  return <main></main>;
+  return (
+    // 아래는 예시 사용방법입니다.
+    <div className='flex w-full flex-row items-center justify-center gap-4 px-4'>
+      <Icon id='chat' />
+      <Icon id='home' />
+      <Icon id='user' />
+      <Icon id='add' />
+      <Icon id='comment' size={16} />
+      <Icon id='heart' size={16} />
+    </div>
+  );
 };
 
 export default Home;

src/components/Icon/index.tsx

@@ -0,0 +1,18 @@
+import React, { ComponentProps } from 'react';
+
+import { IconName } from './type';
+
+interface IconProps extends Omit<ComponentProps<'svg'>, 'width' | 'height'> {
+  id: IconName;
+  size?: number;
+}
+
+const Icon = ({ id, size = 20, ...props }: IconProps) => {
+  return (
+    <svg width={size} height={size} {...props}>
+      <use href={`/icon-sprite.svg#${id}`} />
+    </svg>
+  );
+};
+
+export default Icon;

src/components/Icon/type.ts

@@ -0,0 +1 @@
+export type IconName = 'heart' | 'home' | 'user' | 'comment' | 'chat' | 'add';