Setting(project): svg sprite 설정

apps/client/package.json

@@ -14,6 +14,7 @@
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
+    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@eslint/js": "^9.33.0",
     "@pinback/eslint-config": "workspace:*",
     "@pinback/typescript-config": "workspace:*",

apps/client/vite.config.ts

@@ -2,9 +2,19 @@ import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
 
 // https://vite.dev/config/
 export default defineConfig({
   // TODO: svg 설정 추가
-  plugins: [react(), tsconfigPaths(), tailwindcss()],
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    tailwindcss(),
+    svgSpritePlugin({
+      iconDirs: ['../../packages/design-system/src/icons/source'],
+      symbolId: 'icon-[name]',
+      inject: 'body-last',
+    }),
+  ],
 });

apps/extension/package.json

@@ -11,12 +11,12 @@
     "zip": "vite build && node scripts/zip.mjs"
   },
   "dependencies": {
-    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@tanstack/react-query": "^5.85.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
+    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@crxjs/vite-plugin": "^2.2.0",
     "@eslint/js": "^9.33.0",
     "@pinback/design-system": "workspace:*",

apps/extension/vite.config.ts

@@ -6,20 +6,26 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 import { resolve } from 'path';
 import { crx } from '@crxjs/vite-plugin';
 import manifest from './manifest.json';
+import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
+
 export default defineConfig({
   plugins: [
     react(),
     tsconfigPaths({
       projects: [resolve(__dirname, '../../tsconfig.json')],
     }),
     tailwindcss(),
-    crx({ manifest }), 
+    crx({ manifest }),
+    svgSpritePlugin({
+      iconDirs: ['../../packages/design-system/src/icons/source'],
+      symbolId: 'icon-[name]',
+      inject: 'body-last',
+    }),
   ],
 
   build: {
     outDir: 'dist',
     copyPublicDir: true,
-
   },
   publicDir: 'public',
   resolve: {
@@ -32,4 +38,4 @@ export default defineConfig({
       '@components': resolve(__dirname, './src/components'),
     },
   },
-});
+});

apps/landing/package.json

@@ -14,6 +14,7 @@
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
+    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@eslint/js": "^9.33.0",
     "@pinback/eslint-config": "workspace:*",
     "@pinback/typescript-config": "workspace:*",

apps/landing/vite.config.ts

@@ -2,9 +2,19 @@ import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
 
 // https://vite.dev/config/
 export default defineConfig({
   // TODO: svg 설정 추가
-  plugins: [react(), tsconfigPaths(), tailwindcss()],
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    tailwindcss(),
+    svgSpritePlugin({
+      iconDirs: ['../../packages/design-system/src/icons/source'],
+      symbolId: 'icon-[name]',
+      inject: 'body-last',
+    }),
+  ],
 });

package.json

@@ -10,6 +10,7 @@
     "test": "turbo run test"
   },
   "devDependencies": {
+    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
@@ -27,4 +28,3 @@
     "node": ">=18"
   }
 }
-

packages/design-system/package.json

@@ -15,7 +15,10 @@
     "build": "vite build",
     "build:storybook": "storybook build",
     "dev:storybook": "storybook dev -p 6006",
-    "generate:component": "turbo gen react-component"
+    "icons:clean": "svgo -f src/icons/source --config=./svgo.config.mjs --multipass",
+    "generate:icons": "tsx src/icons/scripts/generate-icon-list.ts && prettier --write src/icons/iconNames.ts",
+    "generate:component": "turbo gen react-component",
+    "icons": "pnpm icons:clean && pnpm generate:icons"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.1",
@@ -42,18 +45,21 @@
     "playwright": "^1.55.0",
     "storybook": "9.1.3",
     "tailwindcss": "^4.1.12",
+    "tsx": "^4.20.4",
     "typescript": "5.9.2",
     "typescript-eslint": "^8.39.1",
     "vite": "^7.1.2",
     "vitest": "^3.2.4"
   },
   "dependencies": {
+    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.540.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "svgo": "^4.0.0",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.7"
   }

packages/design-system/src/icons/components/icon.tsx

@@ -0,0 +1,106 @@
+import type { IconName } from '../iconNames';
+import React from 'react';
+import clsx from 'clsx';
+
+type IconRotate = 90 | 180 | 270;
+
+type IconColor =
+  | 'main0'
+  | 'main100'
+  | 'main200'
+  | 'main300'
+  | 'main400'
+  | 'main500'
+  | 'main600'
+  | 'gradient-start'
+  | 'gradient-end'
+  | 'secondary'
+  | 'gray0'
+  | 'gray100'
+  | 'gray200'
+  | 'gray300'
+  | 'gray400'
+  | 'gray500'
+  | 'gray600'
+  | 'gray700'
+  | 'gray800'
+  | 'gray900'
+  | 'white-bg'
+  | 'gray-bg'
+  | 'font-black-1'
+  | 'font-gray-2'
+  | 'font-gray-3'
+  | 'font-ltgray-4'
+  | 'font-ltgray-5'
+  | 'error'
+  | 'success'
+  | 'category-red-text'
+  | 'category-purple-text'
+  | 'category-navyblue-text'
+  | 'category-skyblue-text'
+  | 'category-emerald-text'
+  | 'category-navygreen-text'
+  | 'category-khaki-text'
+  | 'category-orange-text'
+  | 'category-amber-text'
+  | 'category-maroon-text'
+  | 'category-red-bg'
+  | 'category-purple-bg'
+  | 'category-navyblue-bg'
+  | 'category-skyblue-bg'
+  | 'category-emerald-bg'
+  | 'category-navygreen-bg'
+  | 'category-khaki-bg'
+  | 'category-orange-bg'
+  | 'category-amber-bg'
+  | 'category-maroon-bg';
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  name: IconName;
+  size?: number | string;
+  width?: number | string;
+  height?: number | string;
+  color?: IconColor;
+  className?: string;
+  rotate?: IconRotate;
+  ariaHidden?: boolean;
+}
+
+export const Icon = ({
+  name,
+  size,
+  width,
+  height,
+  color,
+  className,
+  rotate,
+  ariaHidden = true,
+  ...rest
+}: IconProps) => {
+  const w = width ?? size ?? 20;
+  const h = height ?? size ?? 20;
+
+  const rotateClass =
+    rotate === 90
+      ? 'rotate-90'
+      : rotate === 180
+        ? 'rotate-180'
+        : rotate === 270
+          ? 'rotate-[270deg]'
+          : '';
+
+  const combined = clsx('inline-block', rotateClass, className);
+
+  return (
+    <svg
+      width={typeof w === 'number' ? `${w}px` : w}
+      height={typeof h === 'number' ? `${h}px` : h}
+      className={combined}
+      style={color ? { color: `var(--color-${color})` } : undefined}
+      aria-hidden={ariaHidden}
+      {...rest}
+    >
+      <use href={`#icon-${name}`} />
+    </svg>
+  );
+};

packages/design-system/src/icons/iconNames.ts

@@ -0,0 +1,15 @@
+// 이 파일은 자동 생성 파일입니다. (직접 수정 금지)
+export const iconNames = [
+  'ic_arrow_down_active',
+  'ic_arrow_down_disable',
+  'ic_bookmark_active',
+  'ic_bookmark_disable',
+  'ic_clock_active',
+  'ic_clock_disable',
+  'ic_close',
+  'ic_details_category',
+  'ic_details_disable',
+  'ic_info',
+  'ic_plus',
+] as const;
+export type IconName = (typeof iconNames)[number];

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

@@ -0,0 +1 @@
+export { Icon } from './components/icon';

packages/design-system/src/icons/scripts/generate-icon-list.ts

@@ -0,0 +1,20 @@
+import { readdirSync, writeFileSync } from 'fs';
+import { basename, dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const ICON_DIR = join(__dirname, '../source');
+const OUTPUT_PATH = join(__dirname, '../iconNames.ts');
+
+const files = readdirSync(ICON_DIR).filter((file) => file.endsWith('.svg'));
+
+const iconNames = files.map((file) => basename(file, '.svg'));
+
+const content = `// 이 파일은 자동 생성 파일입니다. (직접 수정 금지)
+export const iconNames = ${JSON.stringify(iconNames)} as const;
+export type IconName = typeof iconNames[number];
+`;
+
+writeFileSync(OUTPUT_PATH, content);

packages/design-system/svgo.config.mjs

@@ -0,0 +1,9 @@
+export default {
+  multipass: true,
+  plugins: [
+    // 기본 최적화 + viewBox 유지
+    { name: 'preset-default', params: { overrides: { removeViewBox: false } } },
+    // 루트 <svg>의 width/height 제거
+    { name: 'removeDimensions' },
+  ],
+};

packages/design-system/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "@pinback/typescript-config/react.json",
   "compilerOptions": {
+    "typeRoots": ["node_modules/@types"],
+
     "outDir": "dist",
     "baseUrl": ".",
     "paths": {

packages/design-system/vite.config.ts

@@ -1,3 +1,4 @@
+import svgSpritePlugin from '@pivanov/vite-plugin-svg-sprite';
 /// <reference types="vitest/config" />
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
@@ -12,7 +13,15 @@ const dirname =
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    svgSpritePlugin({
+      iconDirs: ['src/icons/source'],
+      symbolId: 'icon-[name]',
+      inject: 'body-last',
+    }),
+  ],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),