[CHORE] SVGR 세팅

.gitignore

@@ -42,4 +42,7 @@ yarn-error.log*
 
 # Storybook build output
 packages/timo-design-system/storybook-static/
-packages/timo-design-system/build-storybook.log
+packages/timo-design-system/build-storybook.log
+
+# Icon generated files
+packages/timo-design-system/src/icons/generated/

package.json

@@ -15,7 +15,8 @@
     "check-types": "turbo run check-types",
     "check-types:web": "turbo run check-types --filter=timo-web",
     "gen": "turbo gen",
-    "prepare": "husky"
+    "prepare": "husky",
+    "icons:generate": "pnpm --filter @repo/timo-design-system icons:generate"
   },
   "devDependencies": {
     "@turbo/gen": "^2.9.18",

packages/timo-design-system/generate-icons.mjs

@@ -0,0 +1,45 @@
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const toPascalCase = (str) =>
+  str
+    .replace(/[-_](.)/g, (_, c) => c.toUpperCase())
+    .replace(/^(.)/, (_, c) => c.toUpperCase());
+
+const outputDir = path.join(__dirname, "src/icons/generated");
+const barrelFile = path.join(__dirname, "src/icons/index.ts");
+
+if (fs.existsSync(outputDir)) {
+  fs.rmSync(outputDir, { recursive: true });
+}
+fs.mkdirSync(outputDir, { recursive: true });
+
+execSync(
+  `pnpm exec svgr --config-file svgr.config.mjs --no-index --out-dir src/icons/generated src/icons/source`,
+  { cwd: __dirname, stdio: "inherit" },
+);
+
+const files = fs
+  .readdirSync(outputDir)
+  .filter((f) => f.endsWith(".tsx"))
+  .sort();
+
+const exports = files
+  .map((f) => {
+    const base = path.basename(f, ".tsx");
+    return `export { ${toPascalCase(base)}Icon } from './generated/${base}';`;
+  })
+  .join("\n");
+
+fs.writeFileSync(barrelFile, exports + "\n");
+
+execSync(`pnpm prettier --write src/icons/generated src/icons/index.ts`, {
+  cwd: __dirname,
+  stdio: "inherit",
+});
+
+console.log(`✅ ${files.length}개 아이콘 생성 완료`);

packages/timo-design-system/package.json

@@ -14,7 +14,8 @@
     "check-types": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --only-changed --exit-zero-on-changes"
+    "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --only-changed --exit-zero-on-changes",
+    "icons:generate": "node generate-icons.mjs"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
@@ -27,6 +28,7 @@
     "@storybook/addon-links": "^8.6.14",
     "@storybook/react": "8.6.14",
     "@storybook/react-vite": "^8.6.14",
+    "@svgr/cli": "^8.1.0",
     "@tailwindcss/postcss": "^4.3.1",
     "@types/node": "^22.15.3",
     "@types/react": "19.2.2",

packages/timo-design-system/src/icons/index.ts

@@ -1 +1 @@
-export {};
+export { PlayIcon } from "./generated/Play";

packages/timo-design-system/svgr.config.mjs

@@ -0,0 +1,41 @@
+/** @type {import('@svgr/core').Config} */
+const config = {
+  icon: false,
+  typescript: true,
+  jsxRuntime: "automatic",
+  prettier: false,
+  svgo: true,
+  svgoConfig: {
+    plugins: [
+      {
+        name: "preset-default",
+        params: {
+          overrides: {
+            removeViewBox: false,
+          },
+        },
+      },
+      {
+        name: "removeAttrs",
+        params: { attrs: ["style"] },
+      },
+    ],
+  },
+  svgProps: {
+    "aria-hidden": "true",
+  },
+  template: (variables, { tpl }) => {
+    const name = variables.componentName.replace(/^Svg/, "") + "Icon";
+    return tpl`
+${variables.imports};
+
+const ${name} = (${variables.props}) => (
+  ${variables.jsx}
+);
+
+export { ${name} };
+`;
+  },
+};
+
+export default config;