feat(packages/ui): Icon 컴포넌트

apps/web/next.config.mjs

@@ -1,7 +1,10 @@
 import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
 const withVanillaExtract = createVanillaExtractPlugin();
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+// TODO 디자인 시스템 패키지 추가 필요
+// https://vanilla-extract.style/documentation/integrations/next/
+const nextConfig = {
+  transpilePackages: ['@repo/ui', '@repo/theme'],
+};
 
 export default withVanillaExtract(nextConfig);

apps/web/package.json

@@ -2,6 +2,7 @@
   "name": "web",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -19,6 +20,8 @@
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@repo/theme": "workspace:*",
+    "@repo/ui": "workspace:*",
     "@types/node": "^20.11.24",
     "@types/react": "18.3.0",
     "@types/react-dom": "18.3.1",

apps/web/src/app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import localFont from 'next/font/local';
 import './globals.css';
 import '@repo/theme/styles';
-//import '@repo/ui/styles';
+import '@repo/ui/styles';
 import { ThemeProvider } from '@repo/theme';
 
 const geistSans = localFont({

apps/web/src/app/page.tsx

@@ -1,3 +1,10 @@
+import { Icon } from '@repo/ui';
+
 export default function Home() {
-  return <div>웹 1팀 파이팅!</div>;
+  return (
+    <div>
+      웹 1팀 파이팅!
+      <Icon width={100} height={100} name="stack" fill="semantic.blue" />
+    </div>
+  );
 }

package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/recipes": "^0.5.5"
   }
 }

packages/theme/package.json

@@ -2,6 +2,9 @@
   "name": "@repo/theme",
   "version": "0.0.0",
   "private": true,
+  "main": "./dist/index.js",
+  "type": "module",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {

packages/ui/src/components/Icon/Icon.css.ts

@@ -0,0 +1,11 @@
+import { style, createVar, globalStyle } from '@vanilla-extract/css';
+
+export const strokeColor = createVar();
+export const fillColor = createVar();
+
+export const parent = style({});
+
+globalStyle(`.${parent} path`, {
+  stroke: strokeColor,
+  fill: fillColor,
+});

packages/ui/src/components/Icon/Icon.tsx

@@ -0,0 +1,53 @@
+import { FC, SVGProps } from 'react';
+import { icons } from './assets';
+import { tokens } from '@repo/theme';
+import * as styles from './Icon.css';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+type IconName = keyof typeof icons;
+
+type Colors = typeof tokens.colors;
+
+type ColorType =
+  | `primary.${keyof Colors['primary']}`
+  | `semantic.${keyof Colors['semantic']}`
+  | `grey.${keyof Colors['grey']}`;
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  name: IconName;
+  fill?: ColorType;
+  stroke?: ColorType;
+}
+
+export const Icon: FC<IconProps> = ({
+  name,
+  stroke,
+  fill,
+  ...rest
+}: IconProps) => {
+  const SVG = icons[name] as FC<SVGProps<SVGSVGElement>>;
+
+  const getColor = (color?: ColorType): string => {
+    if (!color) return 'transparent';
+    const [category, key] = color.split('.') as [keyof Colors, string];
+    return tokens.colors[category][key as keyof Colors[typeof category]];
+  };
+
+  const resolvedFill = getColor(fill) || 'transparent';
+  const resolvedStroke = getColor(stroke) || 'transparent';
+
+  return (
+    <SVG
+      className={styles.parent}
+      style={JSON.parse(
+        JSON.stringify(
+          assignInlineVars({
+            [styles.strokeColor]: resolvedStroke,
+            [styles.fillColor]: resolvedFill,
+          })
+        )
+      )}
+      {...rest}
+    />
+  );
+};

packages/ui/src/components/index.ts

@@ -1 +1 @@
-//export * from './TestComponent';
+export * from './Icon/Icon';

packages/ui/src/index.ts

@@ -1,2 +1 @@
 export * from './components';
-export * from './icons';

packages/ui/tsconfig.json

@@ -9,6 +9,6 @@
     "outDir": "./dist",
     "declaration": true
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "global.d.ts"],
   "exclude": ["node_modules", "dist"]
 }