[Setting] 2025-02-04 Svgr 세팅 (#10)

* setting: svgr 세팅

* fix: svgr index.ts 파일도 포맷팅 되도록 추가

Author: gudusol

.svgrrc

@@ -0,0 +1,17 @@
+{
+  "typescript": true,
+  "jsxRuntime": "automatic",
+  "dimensions": false,
+  "memo": true,
+  "svgo": true,
+  "svgoConfig": {
+    "plugins": [
+      {
+        "name": "removeViewBox",
+        "active": false
+      }
+    ]
+  },
+  "titleProp": true,
+  "icon": true
+}

apps/admin/package.json

@@ -14,18 +14,19 @@
   "dependencies": {
     "@tanstack/react-router": "^1.98.4",
     "@tanstack/router-devtools": "^1.98.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "devDependencies": {
     "@tanstack/router-plugin": "^1.98.6",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.17.0",
     "globals": "^15.14.0",
-    "typescript": "~5.6.2",
+    "typescript": "~5.6.3",
     "typescript-eslint": "^8.18.2",
-    "vite": "^6.0.5"
+    "vite": "^6.0.5",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }

apps/admin/public/svg/ic-sign-out.svg

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react';
+import { memo } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const SvgIcSignOut = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg fill='none' xmlns='http://www.w3.org/2000/svg' aria-labelledby={titleId} {...props}>
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g clipPath='url(#clip0_1934_1419)'>
+      <path
+        d='M22.8283 9.17119L18.9493 5.29219C18.7607 5.11003 18.5081 5.00923 18.2459 5.01151C17.9837 5.01379 17.7329 5.11896 17.5475 5.30437C17.3621 5.48978 17.2569 5.74059 17.2546 6.00279C17.2523 6.26498 17.3531 6.51758 17.5353 6.70619L21.4143 10.5852C21.5295 10.7027 21.6302 10.8337 21.7143 10.9752C21.6993 10.9752 21.6873 10.9672 21.6723 10.9672L5.98828 10.9992C5.72306 10.9992 5.46871 11.1045 5.28117 11.2921C5.09364 11.4796 4.98828 11.734 4.98828 11.9992C4.98828 12.2644 5.09364 12.5188 5.28117 12.7063C5.46871 12.8938 5.72306 12.9992 5.98828 12.9992L21.6663 12.9672C21.6943 12.9672 21.7173 12.9532 21.7443 12.9512C21.6556 13.1203 21.5431 13.2759 21.4103 13.4132L17.5313 17.2922C17.4358 17.3844 17.3596 17.4948 17.3072 17.6168C17.2548 17.7388 17.2272 17.87 17.226 18.0028C17.2249 18.1356 17.2502 18.2672 17.3005 18.3901C17.3507 18.513 17.425 18.6247 17.5189 18.7186C17.6128 18.8125 17.7244 18.8867 17.8473 18.937C17.9702 18.9873 18.1019 19.0126 18.2347 19.0114C18.3675 19.0103 18.4987 18.9827 18.6207 18.9303C18.7427 18.8779 18.853 18.8017 18.9453 18.7062L22.8243 14.8272C23.5742 14.0771 23.9954 13.0598 23.9954 11.9992C23.9954 10.9385 23.5742 9.9213 22.8243 9.17119H22.8283Z'
+        fill='white'
+      />
+      <path
+        d='M7 22H5C4.20435 22 3.44129 21.6839 2.87868 21.1213C2.31607 20.5587 2 19.7956 2 19V5C2 4.20435 2.31607 3.44129 2.87868 2.87868C3.44129 2.31607 4.20435 2 5 2H7C7.26522 2 7.51957 1.89464 7.70711 1.70711C7.89464 1.51957 8 1.26522 8 1C8 0.734784 7.89464 0.48043 7.70711 0.292893C7.51957 0.105357 7.26522 0 7 0L5 0C3.67441 0.00158786 2.40356 0.528882 1.46622 1.46622C0.528882 2.40356 0.00158786 3.67441 0 5L0 19C0.00158786 20.3256 0.528882 21.5964 1.46622 22.5338C2.40356 23.4711 3.67441 23.9984 5 24H7C7.26522 24 7.51957 23.8946 7.70711 23.7071C7.89464 23.5196 8 23.2652 8 23C8 22.7348 7.89464 22.4804 7.70711 22.2929C7.51957 22.1054 7.26522 22 7 22Z'
+        fill='white'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_1934_1419'>
+        <rect width={24} height={24} fill='white' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+const Memo = memo(SvgIcSignOut);
+export default Memo;

apps/admin/src/assets/svg/IcSignOut.tsx

@@ -0,0 +1 @@
+export { default as IcSignOut } from './IcSignOut';

apps/admin/src/assets/svg/index.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import svgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
     outDir: 'dist',
   },
-  plugins: [TanStackRouterVite({}), react()],
+  plugins: [TanStackRouterVite({}), react(), svgr()],
 });

apps/admin/vite.config.ts

@@ -1,7 +1,25 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+
+  experimental: {
+    turbo: {
+      rules: {
+        '*.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
+      },
+    },
+  },
 };
 
 export default nextConfig;

apps/service/next.config.ts

@@ -14,6 +14,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

apps/service/package.json

@@ -7,7 +7,10 @@
     "dev:service": "turbo dev --filter=service",
     "dev:admin": "turbo dev --filter=admin",
     "lint": "turbo lint",
-    "format": "prettier --write \"**/*.{js,ts,tsx,jsx,mjs,hbs,json,css,md}\""
+    "format": "prettier --write \"**/*.{js,ts,tsx,jsx,mjs,hbs,json,css,md}\"",
+    "svgr": "pnpm svgr:admin && pnpm svgr:service",
+    "svgr:admin": "pnpm dlx @svgr/cli apps/admin/public/svg --out-dir apps/admin/src/assets/svg --no-prettier && prettier --write \"apps/admin/src/assets/svg/**/*.{ts,tsx}\"",
+    "svgr:service": "pnpm dlx @svgr/cli apps/service/public/svg --out-dir apps/service/src/assets/svg --no-prettier && prettier --write \"apps/service/src/assets/svg/**/*.{ts,tsx}\""
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^8.22.0",