diff --git a/apps/web/package.json b/apps/web/package.json
index 91386a6e..95dd905f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -13,18 +13,19 @@
"dependencies": {
"@repo/theme": "workspace:^",
"@repo/ui": "workspace:^",
+ "@vanilla-extract/css": "^1.17.0",
"next": "14.2.21",
"overlay-kit": "^1.4.1",
"react": "^18",
"react-dom": "^18",
- "react-hook-form": "^7.54.2",
- "@vanilla-extract/css": "^1.17.0"
+ "react-hook-form": "^7.54.2"
},
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/theme": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@repo/ui": "workspace:*",
+ "@svgr/webpack": "^8.1.0",
"@types/node": "^20.11.24",
"@types/react": "18.3.0",
"@types/react-dom": "18.3.1",
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index ae2ee8a0..66fa8263 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,20 +1,18 @@
'use client';
import { useForm } from 'react-hook-form';
-import {
- Icon,
- Toast,
- Text,
- Button,
- Badge,
- Checkbox,
- Label,
- Breadcrumb,
- TextField,
- RadioCards,
- Skeleton,
- Modal,
-} from '@repo/ui';
+import { Icon } from '@repo/ui/Icon';
+import { Toast } from '@repo/ui/Toast';
+import { Text } from '@repo/ui/Text';
+import { Button } from '@repo/ui/Button';
+import { Badge } from '@repo/ui/Badge';
+import { Checkbox } from '@repo/ui/Checkbox';
+import { Label } from '@repo/ui/Label';
+import { Breadcrumb } from '@repo/ui/Breadcrumb';
+import { TextField } from '@repo/ui/TextField';
+import { RadioCards } from '@repo/ui/RadioCards';
+import { Skeleton } from '@repo/ui/Skeleton';
+import { Modal } from '@repo/ui/Modal';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import { overlay } from 'overlay-kit';
diff --git a/packages/ui/esbuild.config.mjs b/packages/ui/esbuild.config.mjs
index 0e9c4636..50205168 100644
--- a/packages/ui/esbuild.config.mjs
+++ b/packages/ui/esbuild.config.mjs
@@ -2,12 +2,9 @@ import esbuild from 'esbuild';
import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
import svgr from 'esbuild-plugin-svgr';
import { preserveDirectivesPlugin } from 'esbuild-plugin-preserve-directives';
-import path from 'path';
-
-const outdir = path.join(process.cwd(), 'dist');
const buildOptions = {
- entryPoints: ['src/index.ts'],
+ entryPoints: ['./src/index.ts'],
bundle: true,
platform: 'node',
plugins: [
@@ -21,8 +18,10 @@ const buildOptions = {
],
loader: { '.css': 'file' },
allowOverwrite: true,
- outdir,
external: ['react', 'react-dom'],
+ minify: true,
+ treeShaking: true,
+ outdir: 'dist',
};
esbuild
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 363f7da3..eda86a27 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -10,17 +10,80 @@
"import": "./dist/index.js"
},
"./LottieAnimation": "./dist/components/LottieAnimation/LottieAnimation.js",
- "./provider": "./dist/provider/index.js",
- "./hooks": "./dist/hooks/index.js",
"./Spinner": "./dist/components/Spinner/Spinner.js",
- "./styles": "./dist/index.css"
+ "./provider": {
+ "types": "./dist/provider/index.d.ts",
+ "import": "./dist/provider/index.js"
+ },
+ "./hooks": {
+ "types": "./dist/hooks/index.d.ts",
+ "import": "./dist/hooks/index.js"
+ },
+ "./styles": {
+ "import": "./dist/index.css"
+ },
+ "./IconButton": {
+ "types": "./dist/components/IconButton/index.d.ts",
+ "import": "./dist/components/IconButton/index.js"
+ },
+ "./Spacing": {
+ "types": "./dist/components/Spacing/index.d.ts",
+ "import": "./dist/components/Spacing/index.js"
+ },
+ "./Icon": {
+ "types": "./dist/components/Icon/index.d.ts",
+ "import": "./dist/components/Icon/index.js"
+ },
+ "./Toast": {
+ "types": "./dist/components/Toast/index.d.ts",
+ "import": "./dist/components/Toast/index.js"
+ },
+ "./Text": {
+ "types": "./dist/components/Text/index.d.ts",
+ "import": "./dist/components/Text/index.js"
+ },
+ "./Button": {
+ "types": "./dist/components/Button/index.d.ts",
+ "import": "./dist/components/Button/index.js"
+ },
+ "./Badge": {
+ "types": "./dist/components/Badge/index.d.ts",
+ "import": "./dist/components/Badge/index.js"
+ },
+ "./Checkbox": {
+ "types": "./dist/components/Checkbox/index.d.ts",
+ "import": "./dist/components/Checkbox/index.js"
+ },
+ "./Label": {
+ "types": "./dist/components/Label/index.d.ts",
+ "import": "./dist/components/Label/index.js"
+ },
+ "./Breadcrumb": {
+ "types": "./dist/components/Breadcrumb/index.d.ts",
+ "import": "./dist/components/Breadcrumb/index.js"
+ },
+ "./TextField": {
+ "types": "./dist/components/TextField/index.d.ts",
+ "import": "./dist/components/TextField/index.js"
+ },
+ "./RadioCards": {
+ "types": "./dist/components/RadioCards/index.d.ts",
+ "import": "./dist/components/RadioCards/index.js"
+ },
+ "./Modal": {
+ "types": "./dist/components/Modal/index.d.ts",
+ "import": "./dist/components/Modal/index.js"
+ },
+ "./Skeleton": {
+ "types": "./dist/components/Skeleton/index.d.ts",
+ "import": "./dist/components/Skeleton/index.js"
+ }
},
"scripts": {
"build": "tsc && node esbuild.config.mjs",
"dev": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.mjs --watch",
"lint": "eslint . --max-warnings 0",
- "build:icons": "esbuild src/scripts/generate-icon-map.ts --bundle --platform=node --outdir=dist/scripts",
- "generate:icons": "pnpm run build:icons && node dist/scripts/generate-icon-map.js",
+ "generate:icons": "tsx src/scripts/convert-svg-to-react.mts && tsx src/scripts/generate-icon-map.mts && prettier --write ./src/components/Icon/*",
"build:lotties": "esbuild src/scripts/generate-lottie-map.mts --bundle --platform=node --outdir=dist/scripts",
"generate:lotties": "pnpm run build:lotties && node dist/scripts/generate-lottie-map.js"
},
@@ -28,10 +91,10 @@
"@radix-ui/react-slot": "^1.1.1",
"@repo/theme": "workspace:^",
"@types/react-dom": "18.3.1",
- "motion": "^11.17.0",
- "react": "^18",
"@vanilla-extract/css": "^1.17.0",
- "@vanilla-extract/recipes": "^0.5.5"
+ "@vanilla-extract/recipes": "^0.5.5",
+ "motion": "^11.17.0",
+ "react": "^18"
},
"devDependencies": {
"@repo/theme": "workspace:*",
@@ -39,9 +102,10 @@
"@types/react": "^18.2.0",
"@vanilla-extract/esbuild-plugin": "^2.3.5",
"esbuild": "^0.21.0",
+ "esbuild-plugin-copy": "^2.1.1",
"esbuild-plugin-preserve-directives": "^0.0.11",
"esbuild-plugin-svgr": "^3.1.0",
- "ts-node": "^10.9.2"
+ "tsx": "^4.19.2"
},
"peerDependencies": {
"react": "^18",
diff --git a/packages/ui/src/assets/icons/_IconX.svg b/packages/ui/src/assets/icons/_IconX.svg
deleted file mode 100644
index 2829cf1e..00000000
--- a/packages/ui/src/assets/icons/_IconX.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/packages/ui/src/components/Badge/index.ts b/packages/ui/src/components/Badge/index.ts
new file mode 100644
index 00000000..cd3531df
--- /dev/null
+++ b/packages/ui/src/components/Badge/index.ts
@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';
diff --git a/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
index 5a4ee717..196cf474 100644
--- a/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -1,6 +1,6 @@
import { Slot } from '@radix-ui/react-slot';
import { forwardRef, ReactNode, ComponentPropsWithoutRef } from 'react';
-import { Text } from '@/components';
+import { Text } from '../Text';
import { breadcrumbItemStyle } from './Breadcrumb.css';
export type BreadcrumbItemProps = {
diff --git a/packages/ui/src/components/Breadcrumb/BreadcrumbSeparator.tsx b/packages/ui/src/components/Breadcrumb/BreadcrumbSeparator.tsx
index 1076c184..0136f225 100644
--- a/packages/ui/src/components/Breadcrumb/BreadcrumbSeparator.tsx
+++ b/packages/ui/src/components/Breadcrumb/BreadcrumbSeparator.tsx
@@ -1,5 +1,5 @@
import { forwardRef, ComponentPropsWithoutRef, ReactNode } from 'react';
-import { Icon } from '@/components';
+import { Icon } from '../Icon';
import { breadcrumbSeparatorStyle } from './Breadcrumb.css';
export type BreadcrumbSeparatorProps = {
diff --git a/packages/ui/src/components/Breadcrumb/index.ts b/packages/ui/src/components/Breadcrumb/index.ts
new file mode 100644
index 00000000..e0993e25
--- /dev/null
+++ b/packages/ui/src/components/Breadcrumb/index.ts
@@ -0,0 +1,6 @@
+export { Breadcrumb } from './Breadcrumb';
+export type {
+ BreadcrumbProps,
+ BreadcrumbItemProps,
+ BreadcrumbSeparatorProps,
+} from './Breadcrumb';
diff --git a/packages/ui/src/components/Button/index.ts b/packages/ui/src/components/Button/index.ts
new file mode 100644
index 00000000..1fd6a59b
--- /dev/null
+++ b/packages/ui/src/components/Button/index.ts
@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonSize, ButtonVariant, ButtonProps } from './Button';
diff --git a/packages/ui/src/components/Checkbox/Checkbox.tsx b/packages/ui/src/components/Checkbox/Checkbox.tsx
index d9f37ec0..096f6777 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.tsx
+++ b/packages/ui/src/components/Checkbox/Checkbox.tsx
@@ -1,5 +1,5 @@
import { motion } from 'motion/react';
-import { Text, Icon } from '@/components';
+import { Text, Icon } from '../../components';
import * as styles from './Checkbox.css';
import {
ChangeEvent,
@@ -8,7 +8,7 @@ import {
useState,
KeyboardEvent,
} from 'react';
-import { usePress } from '@/hooks/usePress';
+import { usePress } from '../../hooks';
export type CheckboxProps = Omit<
InputHTMLAttributes,
diff --git a/packages/ui/src/components/Checkbox/index.ts b/packages/ui/src/components/Checkbox/index.ts
new file mode 100644
index 00000000..43aaf925
--- /dev/null
+++ b/packages/ui/src/components/Checkbox/index.ts
@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
diff --git a/packages/ui/src/components/Icon/assets.ts b/packages/ui/src/components/Icon/assets.ts
index cc7d33f4..addd8362 100644
--- a/packages/ui/src/components/Icon/assets.ts
+++ b/packages/ui/src/components/Icon/assets.ts
@@ -1,31 +1,30 @@
-import IconArrowBottom from '@/assets/icons/IconArrowBottom.svg';
-import IconArrowFillBottom from '@/assets/icons/IconArrowFillBottom.svg';
-import IconArrowFillTop from '@/assets/icons/IconArrowFillTop.svg';
-import IconArrowLeft from '@/assets/icons/IconArrowLeft.svg';
-import IconArrowRight from '@/assets/icons/IconArrowRight.svg';
-import IconArrowTop from '@/assets/icons/IconArrowTop.svg';
-import IconCalendar from '@/assets/icons/IconCalendar.svg';
-import IconChat from '@/assets/icons/IconChat.svg';
-import IconCheck from '@/assets/icons/IconCheck.svg';
-import IconCheckCalendar from '@/assets/icons/IconCheckCalendar.svg';
-import IconCheckbox from '@/assets/icons/IconCheckbox.svg';
-import IconDocument from '@/assets/icons/IconDocument.svg';
-import IconLineThree from '@/assets/icons/IconLineThree.svg';
-import IconNotice from '@/assets/icons/IconNotice.svg';
-import IconPencil from '@/assets/icons/IconPencil.svg';
-import IconPicture from '@/assets/icons/IconPicture.svg';
-import IconPlus from '@/assets/icons/IconPlus.svg';
-import IconPlusPicture from '@/assets/icons/IconPlusPicture.svg';
-import IconSend from '@/assets/icons/IconSend.svg';
-import IconShopping from '@/assets/icons/IconShopping.svg';
-import IconSmile from '@/assets/icons/IconSmile.svg';
-import IconStack from '@/assets/icons/IconStack.svg';
-import IconStar from '@/assets/icons/IconStar.svg';
-import IconTwinkle from '@/assets/icons/IconTwinkle.svg';
-import IconUnSelectedCheckbox from '@/assets/icons/IconUnSelectedCheckbox.svg';
-import IconX from '@/assets/icons/IconX.svg';
-import IconXCircle from '@/assets/icons/IconXCircle.svg';
-import _IconX from '@/assets/icons/_IconX.svg';
+import IconArrowBottom from './assets/IconArrowBottom';
+import IconArrowFillBottom from './assets/IconArrowFillBottom';
+import IconArrowFillTop from './assets/IconArrowFillTop';
+import IconArrowLeft from './assets/IconArrowLeft';
+import IconArrowRight from './assets/IconArrowRight';
+import IconArrowTop from './assets/IconArrowTop';
+import IconCalendar from './assets/IconCalendar';
+import IconChat from './assets/IconChat';
+import IconCheck from './assets/IconCheck';
+import IconCheckCalendar from './assets/IconCheckCalendar';
+import IconCheckbox from './assets/IconCheckbox';
+import IconDocument from './assets/IconDocument';
+import IconLineThree from './assets/IconLineThree';
+import IconNotice from './assets/IconNotice';
+import IconPencil from './assets/IconPencil';
+import IconPicture from './assets/IconPicture';
+import IconPlus from './assets/IconPlus';
+import IconPlusPicture from './assets/IconPlusPicture';
+import IconSend from './assets/IconSend';
+import IconShopping from './assets/IconShopping';
+import IconSmile from './assets/IconSmile';
+import IconStack from './assets/IconStack';
+import IconStar from './assets/IconStar';
+import IconTwinkle from './assets/IconTwinkle';
+import IconUnSelectedCheckbox from './assets/IconUnSelectedCheckbox';
+import IconX from './assets/IconX';
+import IconXCircle from './assets/IconXCircle';
export const icons = {
arrowBottom: IconArrowBottom,
@@ -55,5 +54,4 @@ export const icons = {
unSelectedCheckbox: IconUnSelectedCheckbox,
x: IconX,
xCircle: IconXCircle,
- iconX: _IconX,
};
diff --git a/packages/ui/src/components/Icon/assets/IconArrowBottom.tsx b/packages/ui/src/components/Icon/assets/IconArrowBottom.tsx
new file mode 100644
index 00000000..6c8b4b87
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconArrowBottom.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconArrowBottomProps extends React.SVGProps {}
+
+const IconArrowBottom = (props: SVGProps) => (
+
+);
+
+export default IconArrowBottom;
diff --git a/packages/ui/src/components/Icon/assets/IconArrowFillBottom.tsx b/packages/ui/src/components/Icon/assets/IconArrowFillBottom.tsx
new file mode 100644
index 00000000..b8b0dfbf
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconArrowFillBottom.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+interface IconArrowFillBottomProps extends React.SVGProps {}
+
+const IconArrowFillBottom = (props: SVGProps) => (
+
+);
+
+export default IconArrowFillBottom;
diff --git a/packages/ui/src/components/Icon/assets/IconArrowFillTop.tsx b/packages/ui/src/components/Icon/assets/IconArrowFillTop.tsx
new file mode 100644
index 00000000..cfc26b63
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconArrowFillTop.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+interface IconArrowFillTopProps extends React.SVGProps {}
+
+const IconArrowFillTop = (props: SVGProps) => (
+
+);
+
+export default IconArrowFillTop;
diff --git a/packages/ui/src/components/Icon/assets/IconArrowLeft.tsx b/packages/ui/src/components/Icon/assets/IconArrowLeft.tsx
new file mode 100644
index 00000000..da3cc048
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconArrowLeft.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconArrowLeftProps extends React.SVGProps {}
+
+const IconArrowLeft = (props: SVGProps) => (
+
+);
+
+export default IconArrowLeft;
diff --git a/packages/ui/src/components/Icon/assets/IconArrowRight.tsx b/packages/ui/src/components/Icon/assets/IconArrowRight.tsx
new file mode 100644
index 00000000..756d97b4
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconArrowRight.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconArrowRightProps extends React.SVGProps {}
+
+const IconArrowRight = (props: SVGProps) => (
+
+);
+
+export default IconArrowRight;
diff --git a/packages/ui/src/components/Icon/assets/IconArrowTop.tsx b/packages/ui/src/components/Icon/assets/IconArrowTop.tsx
new file mode 100644
index 00000000..c2ba7cce
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconArrowTop.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconArrowTopProps extends React.SVGProps {}
+
+const IconArrowTop = (props: SVGProps) => (
+
+);
+
+export default IconArrowTop;
diff --git a/packages/ui/src/components/Icon/assets/IconCalendar.tsx b/packages/ui/src/components/Icon/assets/IconCalendar.tsx
new file mode 100644
index 00000000..f32b5de1
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconCalendar.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconCalendarProps extends React.SVGProps {}
+
+const IconCalendar = (props: SVGProps) => (
+
+);
+
+export default IconCalendar;
diff --git a/packages/ui/src/components/Icon/assets/IconChat.tsx b/packages/ui/src/components/Icon/assets/IconChat.tsx
new file mode 100644
index 00000000..237324ab
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconChat.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconChatProps extends React.SVGProps {}
+
+const IconChat = (props: SVGProps) => (
+
+);
+
+export default IconChat;
diff --git a/packages/ui/src/components/Icon/assets/IconCheck.tsx b/packages/ui/src/components/Icon/assets/IconCheck.tsx
new file mode 100644
index 00000000..898c64a0
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconCheck.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconCheckProps extends React.SVGProps {}
+
+const IconCheck = (props: SVGProps) => (
+
+);
+
+export default IconCheck;
diff --git a/packages/ui/src/components/Icon/assets/IconCheckCalendar.tsx b/packages/ui/src/components/Icon/assets/IconCheckCalendar.tsx
new file mode 100644
index 00000000..4af3baae
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconCheckCalendar.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconCheckCalendarProps extends React.SVGProps {}
+
+const IconCheckCalendar = (props: SVGProps) => (
+
+);
+
+export default IconCheckCalendar;
diff --git a/packages/ui/src/components/Icon/assets/IconCheckbox.tsx b/packages/ui/src/components/Icon/assets/IconCheckbox.tsx
new file mode 100644
index 00000000..d41fa027
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconCheckbox.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconCheckboxProps extends React.SVGProps {}
+
+const IconCheckbox = (props: SVGProps) => (
+
+);
+
+export default IconCheckbox;
diff --git a/packages/ui/src/components/Icon/assets/IconDocument.tsx b/packages/ui/src/components/Icon/assets/IconDocument.tsx
new file mode 100644
index 00000000..7f436386
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconDocument.tsx
@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react';
+
+interface IconDocumentProps extends React.SVGProps {}
+
+const IconDocument = (props: SVGProps) => (
+
+);
+
+export default IconDocument;
diff --git a/packages/ui/src/components/Icon/assets/IconLineThree.tsx b/packages/ui/src/components/Icon/assets/IconLineThree.tsx
new file mode 100644
index 00000000..ed2c95ed
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconLineThree.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconLineThreeProps extends React.SVGProps {}
+
+const IconLineThree = (props: SVGProps) => (
+
+);
+
+export default IconLineThree;
diff --git a/packages/ui/src/components/Icon/assets/IconNotice.tsx b/packages/ui/src/components/Icon/assets/IconNotice.tsx
new file mode 100644
index 00000000..0dc29ecb
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconNotice.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconNoticeProps extends React.SVGProps {}
+
+const IconNotice = (props: SVGProps) => (
+
+);
+
+export default IconNotice;
diff --git a/packages/ui/src/components/Icon/assets/IconPencil.tsx b/packages/ui/src/components/Icon/assets/IconPencil.tsx
new file mode 100644
index 00000000..3d7aee84
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconPencil.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconPencilProps extends React.SVGProps {}
+
+const IconPencil = (props: SVGProps) => (
+
+);
+
+export default IconPencil;
diff --git a/packages/ui/src/components/Icon/assets/IconPicture.tsx b/packages/ui/src/components/Icon/assets/IconPicture.tsx
new file mode 100644
index 00000000..fd34c3a6
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconPicture.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconPictureProps extends React.SVGProps {}
+
+const IconPicture = (props: SVGProps) => (
+
+);
+
+export default IconPicture;
diff --git a/packages/ui/src/components/Icon/assets/IconPlus.tsx b/packages/ui/src/components/Icon/assets/IconPlus.tsx
new file mode 100644
index 00000000..ac5f2289
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconPlus.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconPlusProps extends React.SVGProps {}
+
+const IconPlus = (props: SVGProps) => (
+
+);
+
+export default IconPlus;
diff --git a/packages/ui/src/components/Icon/assets/IconPlusPicture.tsx b/packages/ui/src/components/Icon/assets/IconPlusPicture.tsx
new file mode 100644
index 00000000..9bb1c6d6
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconPlusPicture.tsx
@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react';
+
+interface IconPlusPictureProps extends React.SVGProps {}
+
+const IconPlusPicture = (props: SVGProps) => (
+
+);
+
+export default IconPlusPicture;
diff --git a/packages/ui/src/components/Icon/assets/IconSend.tsx b/packages/ui/src/components/Icon/assets/IconSend.tsx
new file mode 100644
index 00000000..6673c767
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconSend.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+interface IconSendProps extends React.SVGProps {}
+
+const IconSend = (props: SVGProps) => (
+
+);
+
+export default IconSend;
diff --git a/packages/ui/src/components/Icon/assets/IconShopping.tsx b/packages/ui/src/components/Icon/assets/IconShopping.tsx
new file mode 100644
index 00000000..329b7aec
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconShopping.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconShoppingProps extends React.SVGProps {}
+
+const IconShopping = (props: SVGProps) => (
+
+);
+
+export default IconShopping;
diff --git a/packages/ui/src/components/Icon/assets/IconSmile.tsx b/packages/ui/src/components/Icon/assets/IconSmile.tsx
new file mode 100644
index 00000000..78294ff6
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconSmile.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconSmileProps extends React.SVGProps {}
+
+const IconSmile = (props: SVGProps) => (
+
+);
+
+export default IconSmile;
diff --git a/packages/ui/src/components/Icon/assets/IconStack.tsx b/packages/ui/src/components/Icon/assets/IconStack.tsx
new file mode 100644
index 00000000..13443d31
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconStack.tsx
@@ -0,0 +1,35 @@
+import type { SVGProps } from 'react';
+
+interface IconStackProps extends React.SVGProps {}
+
+const IconStack = (props: SVGProps) => (
+
+);
+
+export default IconStack;
diff --git a/packages/ui/src/components/Icon/assets/IconStar.tsx b/packages/ui/src/components/Icon/assets/IconStar.tsx
new file mode 100644
index 00000000..6702092d
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconStar.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react';
+
+interface IconStarProps extends React.SVGProps {}
+
+const IconStar = (props: SVGProps) => (
+
+);
+
+export default IconStar;
diff --git a/packages/ui/src/components/Icon/assets/IconTwinkle.tsx b/packages/ui/src/components/Icon/assets/IconTwinkle.tsx
new file mode 100644
index 00000000..49cc41ae
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconTwinkle.tsx
@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react';
+
+interface IconTwinkleProps extends React.SVGProps {}
+
+const IconTwinkle = (props: SVGProps) => (
+
+);
+
+export default IconTwinkle;
diff --git a/packages/ui/src/components/Icon/assets/IconUnSelectedCheckbox.tsx b/packages/ui/src/components/Icon/assets/IconUnSelectedCheckbox.tsx
new file mode 100644
index 00000000..95572853
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconUnSelectedCheckbox.tsx
@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+
+interface IconUnSelectedCheckboxProps extends React.SVGProps {}
+
+const IconUnSelectedCheckbox = (props: SVGProps) => (
+
+);
+
+export default IconUnSelectedCheckbox;
diff --git a/packages/ui/src/components/Icon/assets/IconX.tsx b/packages/ui/src/components/Icon/assets/IconX.tsx
new file mode 100644
index 00000000..22f6c0c7
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconX.tsx
@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react';
+
+interface IconXProps extends React.SVGProps {}
+
+const IconX = (props: SVGProps) => (
+
+);
+
+export default IconX;
diff --git a/packages/ui/src/components/Icon/assets/IconXCircle.tsx b/packages/ui/src/components/Icon/assets/IconXCircle.tsx
new file mode 100644
index 00000000..83ce9167
--- /dev/null
+++ b/packages/ui/src/components/Icon/assets/IconXCircle.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react';
+
+interface IconXCircleProps extends React.SVGProps {}
+
+const IconXCircle = (props: SVGProps) => (
+
+);
+
+export default IconXCircle;
diff --git a/packages/ui/src/components/Icon/index.ts b/packages/ui/src/components/Icon/index.ts
new file mode 100644
index 00000000..eb3b189b
--- /dev/null
+++ b/packages/ui/src/components/Icon/index.ts
@@ -0,0 +1,3 @@
+export { icons } from './assets';
+export { Icon } from './Icon';
+export type { IconName, IconProps } from './Icon';
diff --git a/packages/ui/src/components/IconButton/index.ts b/packages/ui/src/components/IconButton/index.ts
new file mode 100644
index 00000000..5f509c99
--- /dev/null
+++ b/packages/ui/src/components/IconButton/index.ts
@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
diff --git a/packages/ui/src/components/Label/index.ts b/packages/ui/src/components/Label/index.ts
new file mode 100644
index 00000000..10ea5b74
--- /dev/null
+++ b/packages/ui/src/components/Label/index.ts
@@ -0,0 +1,2 @@
+export { Label } from './Label';
+export type { LabelProps, LabelVariant } from './Label';
diff --git a/packages/ui/src/components/LottieAnimation/index.ts b/packages/ui/src/components/LottieAnimation/index.ts
new file mode 100644
index 00000000..0129f39e
--- /dev/null
+++ b/packages/ui/src/components/LottieAnimation/index.ts
@@ -0,0 +1,2 @@
+export { LottieAnimation } from './LottieAnimation';
+export type { LottieAnimationProps } from './LottieAnimation';
diff --git a/packages/ui/src/components/Modal/compounds/CTA/CTA.tsx b/packages/ui/src/components/Modal/compounds/CTA/CTA.tsx
index db9c2784..e2b52106 100644
--- a/packages/ui/src/components/Modal/compounds/CTA/CTA.tsx
+++ b/packages/ui/src/components/Modal/compounds/CTA/CTA.tsx
@@ -1,5 +1,5 @@
import { forwardRef } from 'react';
-import { Button, ButtonProps } from '@/components';
+import { Button, ButtonProps } from '../../../Button';
import * as styles from './CTA.css';
export type ModalCTAProps = ButtonProps;
diff --git a/packages/ui/src/components/Modal/compounds/Description/Description.tsx b/packages/ui/src/components/Modal/compounds/Description/Description.tsx
index 2d73daa0..4356176b 100644
--- a/packages/ui/src/components/Modal/compounds/Description/Description.tsx
+++ b/packages/ui/src/components/Modal/compounds/Description/Description.tsx
@@ -1,4 +1,4 @@
-import { Text, TextProps } from '@/components';
+import { Text, TextProps } from '../../../Text';
import * as styles from './Description.css';
export type ModalDescriptionProps = TextProps<'p'>;
diff --git a/packages/ui/src/components/Modal/compounds/DoubleCTA/DoubleCTA.tsx b/packages/ui/src/components/Modal/compounds/DoubleCTA/DoubleCTA.tsx
index 36696577..fb720a82 100644
--- a/packages/ui/src/components/Modal/compounds/DoubleCTA/DoubleCTA.tsx
+++ b/packages/ui/src/components/Modal/compounds/DoubleCTA/DoubleCTA.tsx
@@ -1,10 +1,15 @@
import { forwardRef } from 'react';
-import { Button, ButtonProps } from '@/components';
+import { Button, ButtonProps } from '../../../Button';
import * as styles from './DoubleCTA.css';
+type OptionalButtonProps = Omit & {
+ size?: ButtonProps['size'];
+ variant?: ButtonProps['variant'];
+};
+
export type ModalDoubleCTAProps = {
- cancelProps?: ButtonProps;
- confirmProps?: ButtonProps;
+ cancelProps?: OptionalButtonProps;
+ confirmProps?: OptionalButtonProps;
};
export const DoubleCTA = forwardRef(
diff --git a/packages/ui/src/components/Modal/compounds/Icon/Icon.tsx b/packages/ui/src/components/Modal/compounds/Icon/Icon.tsx
index 2b2b9e2c..c2630c65 100644
--- a/packages/ui/src/components/Modal/compounds/Icon/Icon.tsx
+++ b/packages/ui/src/components/Modal/compounds/Icon/Icon.tsx
@@ -1,4 +1,4 @@
-import { Icon as BaseIcon, IconProps } from '@/components';
+import { Icon as BaseIcon, IconProps } from '../../../Icon';
import * as styles from './Icon.css';
export type ModalIconProps = IconProps;
diff --git a/packages/ui/src/components/Modal/compounds/Title/Title.tsx b/packages/ui/src/components/Modal/compounds/Title/Title.tsx
index 03ebb1c0..80208d03 100644
--- a/packages/ui/src/components/Modal/compounds/Title/Title.tsx
+++ b/packages/ui/src/components/Modal/compounds/Title/Title.tsx
@@ -1,4 +1,4 @@
-import { Text, TextProps } from '@/components';
+import { Text, TextProps } from '../../../Text';
import * as styles from './Title.css';
export type ModalTitleProps = TextProps<'h2'>;
diff --git a/packages/ui/src/components/Modal/index.ts b/packages/ui/src/components/Modal/index.ts
new file mode 100644
index 00000000..07188a5c
--- /dev/null
+++ b/packages/ui/src/components/Modal/index.ts
@@ -0,0 +1,8 @@
+export { Modal } from './Modal';
+export type {
+ ModalProps,
+ ModalTitleProps,
+ ModalDescriptionProps,
+ ModalIconProps,
+ ModalDoubleCTAProps,
+} from './Modal';
diff --git a/packages/ui/src/components/RadioCards/RadioCardsBadge.tsx b/packages/ui/src/components/RadioCards/RadioCardsBadge.tsx
index 547753ef..a1caa591 100644
--- a/packages/ui/src/components/RadioCards/RadioCardsBadge.tsx
+++ b/packages/ui/src/components/RadioCards/RadioCardsBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge, BadgeProps } from '@/components';
+import { Badge, BadgeProps } from '../../components';
import { radioCardsBadgeStyle } from './RadioCards.css';
import { useRadioCardsItem } from './context';
diff --git a/packages/ui/src/components/RadioCards/RadioCardsDescription.tsx b/packages/ui/src/components/RadioCards/RadioCardsDescription.tsx
index 56b25ec4..40feaa02 100644
--- a/packages/ui/src/components/RadioCards/RadioCardsDescription.tsx
+++ b/packages/ui/src/components/RadioCards/RadioCardsDescription.tsx
@@ -1,5 +1,5 @@
-import { Text } from '@/components';
-import type { TextProps } from '@/components';
+import { Text } from '../../components';
+import type { TextProps } from '../../components';
import { useRadioCardsItem } from './context';
export type RadioCardsDescriptionProps = TextProps<'p'>;
diff --git a/packages/ui/src/components/RadioCards/RadioCardsIcon.tsx b/packages/ui/src/components/RadioCards/RadioCardsIcon.tsx
index ebde7851..8d5d6695 100644
--- a/packages/ui/src/components/RadioCards/RadioCardsIcon.tsx
+++ b/packages/ui/src/components/RadioCards/RadioCardsIcon.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps } from '@/components';
+import { Icon, IconProps } from '../../components/Icon';
import { useRadioCardsItem } from './context';
export type RadioCardsIconProps = Omit;
diff --git a/packages/ui/src/components/RadioCards/RadioCardsItem.tsx b/packages/ui/src/components/RadioCards/RadioCardsItem.tsx
index 4e4f4443..ce4e7e0d 100644
--- a/packages/ui/src/components/RadioCards/RadioCardsItem.tsx
+++ b/packages/ui/src/components/RadioCards/RadioCardsItem.tsx
@@ -12,8 +12,8 @@ import { useRadioCards } from './context';
import { radioCardsContentStyle, radioCardsItemStyle } from './RadioCards.css';
import { RadioCardsItemProvider } from './context';
import { HTMLMotionProps, motion } from 'motion/react';
-import { usePress } from '@/hooks/usePress';
-import { mergeRefs } from '@/utils/mergeRefs';
+import { usePress } from '../../hooks/usePress';
+import { mergeRefs } from '../../utils/mergeRefs';
export type RadioCardsItemProps = {
value: string;
diff --git a/packages/ui/src/components/RadioCards/RadioCardsLabel.tsx b/packages/ui/src/components/RadioCards/RadioCardsLabel.tsx
index befbd420..e6dd7ecf 100644
--- a/packages/ui/src/components/RadioCards/RadioCardsLabel.tsx
+++ b/packages/ui/src/components/RadioCards/RadioCardsLabel.tsx
@@ -1,5 +1,5 @@
-import { Text } from '@/components';
-import type { TextProps } from '@/components';
+import { Text } from '../../components';
+import type { TextProps } from '../../components';
import { useRadioCardsItem } from './context';
export type RadioCardsLabelProps = TextProps<'span'>;
diff --git a/packages/ui/src/components/RadioCards/index.ts b/packages/ui/src/components/RadioCards/index.ts
new file mode 100644
index 00000000..21375fb5
--- /dev/null
+++ b/packages/ui/src/components/RadioCards/index.ts
@@ -0,0 +1,8 @@
+export { RadioCards } from './RadioCards';
+export type {
+ RadioCardsProps,
+ RadioCardsItemProps,
+ RadioCardsLabelProps,
+ RadioCardsDescriptionProps,
+ RadioCardsBadgeProps,
+} from './RadioCards';
diff --git a/packages/ui/src/components/Skeleton/index.tsx b/packages/ui/src/components/Skeleton/index.tsx
new file mode 100644
index 00000000..cc2efbec
--- /dev/null
+++ b/packages/ui/src/components/Skeleton/index.tsx
@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
diff --git a/packages/ui/src/components/Spacing/index.ts b/packages/ui/src/components/Spacing/index.ts
new file mode 100644
index 00000000..418b2b3b
--- /dev/null
+++ b/packages/ui/src/components/Spacing/index.ts
@@ -0,0 +1,2 @@
+export { Spacing } from './Spacing';
+export type { SpacingDirection, SpacingProps } from './Spacing';
diff --git a/packages/ui/src/components/Spinner/index.ts b/packages/ui/src/components/Spinner/index.ts
new file mode 100644
index 00000000..381fc7ae
--- /dev/null
+++ b/packages/ui/src/components/Spinner/index.ts
@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
diff --git a/packages/ui/src/components/Text/index.ts b/packages/ui/src/components/Text/index.ts
new file mode 100644
index 00000000..a6296527
--- /dev/null
+++ b/packages/ui/src/components/Text/index.ts
@@ -0,0 +1,2 @@
+export { Text } from './Text.subComponents';
+export type { AllowedTags, TextProps } from './Text';
diff --git a/packages/ui/src/components/TextField/TextFieldInput.tsx b/packages/ui/src/components/TextField/TextFieldInput.tsx
index ebc940f1..82c0a839 100644
--- a/packages/ui/src/components/TextField/TextFieldInput.tsx
+++ b/packages/ui/src/components/TextField/TextFieldInput.tsx
@@ -10,7 +10,7 @@ import {
import { TextFieldContext } from './context';
import { textFieldContainerStyle, textFieldStyle } from './TextField.css';
import { TextFieldCounter } from './TextFieldCounter';
-import { isNil, mergeRefs } from '@/utils';
+import { isNil, mergeRefs } from '../../utils';
export type TextFieldInputProps = {
maxLength?: number;
diff --git a/packages/ui/src/components/TextField/TextFieldLabel.tsx b/packages/ui/src/components/TextField/TextFieldLabel.tsx
index a5152c09..3a4a8e79 100644
--- a/packages/ui/src/components/TextField/TextFieldLabel.tsx
+++ b/packages/ui/src/components/TextField/TextFieldLabel.tsx
@@ -1,5 +1,5 @@
import { forwardRef, ComponentPropsWithoutRef, useContext } from 'react';
-import { Label } from '@/components';
+import { Label } from '../Label';
import { TextFieldContext } from './context';
import { labelStyle } from './TextField.css';
diff --git a/packages/ui/src/components/TextField/TextFieldSubmit.tsx b/packages/ui/src/components/TextField/TextFieldSubmit.tsx
index 1605a26c..0399104b 100644
--- a/packages/ui/src/components/TextField/TextFieldSubmit.tsx
+++ b/packages/ui/src/components/TextField/TextFieldSubmit.tsx
@@ -1,5 +1,5 @@
import { forwardRef, ComponentPropsWithoutRef, useContext } from 'react';
-import { Icon } from '@/components';
+import { Icon } from '../Icon';
import { TextFieldContext } from './context';
import { submitButtonStyle } from './TextField.css';
diff --git a/packages/ui/src/components/TextField/index.ts b/packages/ui/src/components/TextField/index.ts
new file mode 100644
index 00000000..6abf916f
--- /dev/null
+++ b/packages/ui/src/components/TextField/index.ts
@@ -0,0 +1,8 @@
+export { TextField } from './TextField';
+export type {
+ TextFieldProps,
+ TextFieldLabelProps,
+ TextFieldInputProps,
+ TextFieldSubmitProps,
+ TextFieldCounterProps,
+} from './TextField';
diff --git a/packages/ui/src/components/Toast/Toast.tsx b/packages/ui/src/components/Toast/Toast.tsx
index ab5d776d..f58581e8 100644
--- a/packages/ui/src/components/Toast/Toast.tsx
+++ b/packages/ui/src/components/Toast/Toast.tsx
@@ -10,7 +10,7 @@ import {
import { ToastIcon } from './compounds/Icon/Icon';
import * as styles from './Toast.css';
import { useTimer } from './hooks/useTimer';
-import { mergeRefs } from '@/utils';
+import { mergeRefs } from '../../utils';
export type ToastType = 'default' | 'success' | 'error';
diff --git a/packages/ui/src/components/Toast/compounds/Icon/Icon.tsx b/packages/ui/src/components/Toast/compounds/Icon/Icon.tsx
index 0d074b48..beee7ce1 100644
--- a/packages/ui/src/components/Toast/compounds/Icon/Icon.tsx
+++ b/packages/ui/src/components/Toast/compounds/Icon/Icon.tsx
@@ -1,5 +1,5 @@
-import { Icon } from '@repo/ui';
-import type { IconProps } from '@repo/ui';
+import { Icon } from '@repo/ui/Icon';
+import type { IconProps } from '@repo/ui/Icon';
import { ToastType } from '../../Toast';
export type ToastIconProps = Omit & {
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 1fb51d9f..71247908 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,51 +1,14 @@
-export { IconButton } from './IconButton/IconButton';
-export type { IconButtonProps } from './IconButton/IconButton';
-export { Spacing } from './Spacing/Spacing';
-export type { SpacingDirection, SpacingProps } from './Spacing/Spacing';
-export { icons } from './Icon/assets';
-export { Icon } from './Icon/Icon';
-export type { IconName, IconProps } from './Icon/Icon';
-export { Toast } from './Toast';
-export type { ToastProps, ToastType, ToastIconProps } from './Toast';
-export { Text } from './Text/Text.subComponents';
-export type { AllowedTags, TextProps } from './Text/Text';
-export { Button } from './Button/Button';
-export type { ButtonSize, ButtonVariant, ButtonProps } from './Button/Button';
-export { Badge } from './Badge/Badge';
-export type { BadgeProps } from './Badge/Badge';
-export { Checkbox } from './Checkbox/Checkbox';
-export type { CheckboxProps } from './Checkbox/Checkbox';
-export { Label } from './Label/Label';
-export type { LabelProps, LabelVariant } from './Label/Label';
-export { Breadcrumb } from './Breadcrumb/Breadcrumb';
-export type {
- BreadcrumbProps,
- BreadcrumbItemProps,
- BreadcrumbSeparatorProps,
-} from './Breadcrumb/Breadcrumb';
-export { TextField } from './TextField/TextField';
-export type {
- TextFieldProps,
- TextFieldLabelProps,
- TextFieldInputProps,
- TextFieldSubmitProps,
- TextFieldCounterProps,
-} from './TextField/TextField';
-export { RadioCards } from './RadioCards/RadioCards';
-export type {
- RadioCardsProps,
- RadioCardsItemProps,
- RadioCardsLabelProps,
- RadioCardsDescriptionProps,
- RadioCardsBadgeProps,
-} from './RadioCards/RadioCards';
-export { Skeleton } from './Skeleton/Skeleton';
-export type { SkeletonProps } from './Skeleton/Skeleton';
-export { Modal } from './Modal/Modal';
-export type {
- ModalProps,
- ModalTitleProps,
- ModalDescriptionProps,
- ModalIconProps,
- ModalDoubleCTAProps,
-} from './Modal/Modal';
+export * from './IconButton';
+export * from './Spacing';
+export * from './Icon';
+export * from './Toast';
+export * from './Text';
+export * from './Button';
+export * from './Badge';
+export * from './Checkbox';
+export * from './Label';
+export * from './Breadcrumb';
+export * from './TextField';
+export * from './RadioCards';
+export * from './Modal';
+export * from './Skeleton';
diff --git a/packages/ui/src/scripts/convert-svg-to-react.mts b/packages/ui/src/scripts/convert-svg-to-react.mts
new file mode 100644
index 00000000..9a5bc0ab
--- /dev/null
+++ b/packages/ui/src/scripts/convert-svg-to-react.mts
@@ -0,0 +1,112 @@
+import fs from 'fs';
+import path from 'path';
+import * as prettier from 'prettier';
+
+// 설정
+const SVG_DIR = 'src/assets/icons'; // SVG 파일이 있는 디렉토리
+const COMPONENTS_DIR = 'src/components/Icon/assets'; // 리액트 컴포넌트 출력 디렉토리
+
+// 파일명을 PascalCase로 변환하는 유틸리티
+const toPascalCase = (str: string): string => {
+ return str.replace(/(^\w|-\w)/g, clearAndUpper).replace(/\.svg$/i, '');
+};
+
+const clearAndUpper = (text: string): string => {
+ return text.replace(/-/, '').toUpperCase();
+};
+
+// 디렉토리를 재귀적으로 순회하여 SVG 파일을 찾는 함수
+const getSvgFiles = async (dir: string): Promise => {
+ let svgFiles: string[] = [];
+ const files = fs.readdirSync(dir, { withFileTypes: true });
+
+ for (const file of files) {
+ const res = path.resolve(dir, file.name);
+ if (file.isDirectory()) {
+ const nestedFiles = await getSvgFiles(res);
+ svgFiles = svgFiles.concat(nestedFiles);
+ } else if (
+ file.isFile() &&
+ path.extname(file.name).toLowerCase() === '.svg'
+ ) {
+ svgFiles.push(res);
+ }
+ }
+
+ return svgFiles;
+};
+
+// SVG 내용을 리액트 컴포넌트로 생성하는 함수
+const generateReactComponent = (
+ componentName: string,
+ svgContent: string
+): string => {
+ // XML 선언이나 DOCTYPE 제거
+ const cleanSvg = svgContent
+ .replace(/<\?xml.*?\?>\s*/g, '')
+ .replace(/\s*/g, '')
+ .trim();
+
+ // `fill`, `stroke` 등의 속성을 props로 오버라이드할 수 있도록 변경
+ // 이는 단순한 접근 방식입니다. 더 복잡한 SVG의 경우 SVGO 같은 라이브러리를 사용하는 것이 좋습니다.
+ const svgWithProps = cleanSvg
+ .replace(/(