[Feat/#9] svgr setting

babel.config.js

@@ -1,4 +1,4 @@
-const path = require("path");
+const path = require("node:path");
 
 module.exports = (api) => {
 	api.cache(true);

declarations.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+	import type React from "react";
+	import type { SvgProps } from "react-native-svg";
+	const content: React.FC<SvgProps>;
+	export default content;
+}

metro.config.js

@@ -1,9 +1,26 @@
 const { getDefaultConfig } = require("expo/metro-config");
 const { withNativeWind } = require("nativewind/metro");
-const path = require("path");
+const path = require("node:path");
 
-const config = getDefaultConfig(path.resolve(__dirname));
+module.exports = (() => {
+	const config = getDefaultConfig(path.resolve(__dirname));
 
-module.exports = withNativeWind(config, {
-	input: "./src/shared/styles/global.styles.css",
-});
+	const {
+		resolver: { sourceExts, assetExts },
+	} = config;
+
+	config.transformer = {
+		...config.transformer,
+		babelTransformerPath: require.resolve("react-native-svg-transformer"),
+	};
+
+	config.resolver = {
+		...config.resolver,
+		assetExts: assetExts.filter((ext) => ext !== "svg"),
+		sourceExts: [...sourceExts, "svg"],
+	};
+
+	return withNativeWind(config, {
+		input: "./src/shared/styles/global.styles.css",
+	});
+})();

package.json

@@ -1,60 +1,64 @@
 {
-  "name": "assu_fe_rn",
-  "main": "expo-router/entry",
-  "version": "1.0.0",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "typecheck": "tsc --noEmit",
-    "biome:lint": "biome lint ./src",
-    "biome:fix": "biome check --write ./src",
-    "biome:format": "biome format ./src --write"
-  },
-  "dependencies": {
-    "@expo/vector-icons": "^15.0.3",
-    "@hookform/resolvers": "^5.2.2",
-    "@react-navigation/bottom-tabs": "^7.4.0",
-    "@react-navigation/elements": "^2.6.3",
-    "@react-navigation/native": "^7.1.8",
-    "@tanstack/react-query": "^5.90.20",
-    "expo": "~54.0.33",
-    "expo-constants": "~18.0.13",
-    "expo-font": "~14.0.11",
-    "expo-haptics": "~15.0.8",
-    "expo-image": "~3.0.11",
-    "expo-linking": "~8.0.11",
-    "expo-router": "~6.0.23",
-    "expo-splash-screen": "~31.0.13",
-    "expo-status-bar": "~3.0.9",
-    "expo-symbols": "~1.0.8",
-    "expo-system-ui": "~6.0.9",
-    "expo-web-browser": "~15.0.10",
-    "nativewind": "^4.2.1",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-hook-form": "^7.71.1",
-    "react-native": "0.81.5",
-    "react-native-element-dropdown": "^2.12.4",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
-    "react-native-web": "~0.21.0",
-    "react-native-worklets": "0.5.1",
-    "zod": "^4.3.6",
-    "zustand": "^5.0.11"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^2.3.14",
-    "@types/react": "~19.1.10",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "eslint": "^9.25.0",
-    "eslint-config-expo": "~10.0.0",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "tailwindcss": "3.4.17",
-    "typescript": "^5.9.3"
-  },
-  "private": true
+	"name": "assu_fe_rn",
+	"main": "expo-router/entry",
+	"version": "1.0.0",
+	"scripts": {
+		"start": "expo start",
+		"android": "expo start --android",
+		"ios": "expo start --ios",
+		"web": "expo start --web",
+		"typecheck": "tsc --noEmit",
+		"biome:lint": "biome lint .",
+		"biome:fix": "biome check --write .",
+		"biome:format": "biome format . --write",
+		"icons": "node scripts/generate-icons.js"
+	},
+	"dependencies": {
+		"@expo/vector-icons": "^15.0.3",
+		"@hookform/resolvers": "^5.2.2",
+		"@react-navigation/bottom-tabs": "^7.4.0",
+		"@react-navigation/elements": "^2.6.3",
+		"@react-navigation/native": "^7.1.8",
+		"@tanstack/react-query": "^5.90.20",
+		"expo": "~54.0.33",
+		"expo-constants": "~18.0.13",
+		"expo-font": "~14.0.11",
+		"expo-haptics": "~15.0.8",
+		"expo-image": "~3.0.11",
+		"expo-linking": "~8.0.11",
+		"expo-router": "~6.0.23",
+		"expo-splash-screen": "~31.0.13",
+		"expo-status-bar": "~3.0.9",
+		"expo-symbols": "~1.0.8",
+		"expo-system-ui": "~6.0.9",
+		"expo-web-browser": "~15.0.10",
+		"nativewind": "^4.2.1",
+		"react": "19.1.0",
+		"react-dom": "19.1.0",
+		"react-hook-form": "^7.71.1",
+		"react-native": "0.81.5",
+		"react-native-element-dropdown": "^2.12.4",
+		"react-native-gesture-handler": "~2.28.0",
+		"react-native-reanimated": "~4.1.1",
+		"react-native-safe-area-context": "~5.6.0",
+		"react-native-screens": "~4.16.0",
+		"react-native-svg": "15.12.1",
+		"react-native-web": "~0.21.0",
+		"react-native-worklets": "0.5.1",
+		"zod": "^4.3.6",
+		"zustand": "^5.0.11"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.3.14",
+		"@types/react": "~19.1.10",
+		"babel-plugin-module-resolver": "^5.0.2",
+		"concurrently": "^9.2.1",
+		"eslint": "^9.25.0",
+		"eslint-config-expo": "~10.0.0",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"react-native-svg-transformer": "^1.5.3",
+		"tailwindcss": "3.4.17",
+		"typescript": "^5.9.3"
+	},
+	"private": true
 }

scripts/generate-icons.js

@@ -0,0 +1,31 @@
+const fs = require("node:fs");
+const path = require("node:path");
+
+const iconsDir = path.join(__dirname, "../src/shared/assets/icons");
+const outputFile = path.join(iconsDir, "index.ts");
+
+function toPascalCase(str) {
+	return str
+		.replace(/[-_]/g, " ")
+		.replace(/\w+/g, (w) => w[0].toUpperCase() + w.slice(1))
+		.replace(/\s/g, "");
+}
+
+function generateIndex() {
+	const files = fs
+		.readdirSync(iconsDir)
+		.filter((file) => file.endsWith(".svg"));
+
+	const exports = files
+		.map((file) => {
+			const name = path.basename(file, ".svg");
+			const componentName = toPascalCase(name);
+			return `export { default as ${componentName} } from "./${file}";`;
+		})
+		.join("\n");
+
+	fs.writeFileSync(outputFile, exports);
+	console.log("✅ icons index updated");
+}
+
+generateIndex();

src/app/(tabs)/index.tsx

@@ -1,8 +1,9 @@
+import { ScrollView, Text, View } from "react-native";
+import { CheckIcon } from "@/shared/assets/icons";
 import { shadows } from "@/shared/styles/shadows";
+import { SmallButton } from "@/shared/ui/buttons/ActionButton";
 import { BenefitSelectionGroup } from "@/shared/ui/buttons/BenefitSelectionGroup";
 import { MediumButton } from "@/shared/ui/buttons/SubmitButton";
-import { SmallButton } from "@/shared/ui/buttons/ActionButton";
-import { ScrollView, Text, View } from "react-native";
 
 export default function HomeScreen() {
 	return (
@@ -26,7 +27,7 @@ export default function HomeScreen() {
 					Primary 버튼 (Primary Shadow)
 				</Text>
 			</View>
-
+			<CheckIcon width={40} height={40} />
 			{/* 카드 with Neutral Shadow */}
 			<View className="bg-neutral rounded-lg p-4 mb-4" style={shadows.neutral}>
 				<Text className="text-lg font-bold text-content-primary mb-2">

src/shared/assets/icons/index.ts

@@ -0,0 +1 @@
+export { default as CheckIcon } from "./check-icon.svg";

tsconfig.json

@@ -12,6 +12,7 @@
 		"**/*.tsx",
 		".expo/types/**/*.ts",
 		"expo-env.d.ts",
-		"nativewind-env.d.ts"
+		"nativewind-env.d.ts",
+		"declarations.d.ts"
 	]
 }