Add svg

package.json

@@ -10,13 +10,15 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@svgr/plugin-svgo": "^8.1.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.3",
-    "vite": "^5.2.10"
+    "vite": "^5.2.10",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "prettier": {
     "plugins": [

src/app.jsx

@@ -2,7 +2,7 @@ import MainMenu from "./mainMenu";
 
 export default () => {
   return (
-    <main className="bg-navy-700 flex h-screen items-center justify-center">
+    <main className="flex min-h-screen items-center justify-center bg-navy-700">
       <MainMenu />
     </main>
   );

src/mainMenu.jsx

@@ -1,13 +1,15 @@
+import { useState } from "react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 
 import logo from "../assets/logo.svg";
-import { useState } from "react";
+import Cross from "../assets/icon-x.svg?react";
+import Oval from "../assets/icon-o.svg?react";
 
 export default () => {
   const [playerSymbol, setPlayerSymbol] = useState("cross");
 
   return (
-    <div className="m-5 flex w-full max-w-lg flex-col items-center space-y-10">
+    <div className="m-6 flex w-full max-w-lg flex-col items-center space-y-10">
       <img src={logo} alt="logo" />
       <div className="inner-shadow-2-navy-900 flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6">
         <h2 className="mb-6 text-h-xs uppercase text-silver-700">
@@ -24,35 +26,21 @@ export default () => {
             className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
             value="cross"
           >
-            <svg
+            <Cross
-              className="m-auto"
               width="32"
               height="32"
-              viewBox="0 0 64 64"
+              className={`m-auto ${playerSymbol == "cross" ? "text-navy-700" : "text-silver-700"}`}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.002 1.147 32 18.145 48.998 1.147a3 3 0 0 1 4.243 0l9.612 9.612a3 3 0 0 1 0 4.243L45.855 32l16.998 16.998a3 3 0 0 1 0 4.243l-9.612 9.612a3 3 0 0 1-4.243 0L32 45.855 15.002 62.853a3 3 0 0 1-4.243 0L1.147 53.24a3 3 0 0 1 0-4.243L18.145 32 1.147 15.002a3 3 0 0 1 0-4.243l9.612-9.612a3 3 0 0 1 4.243 0Z"
-                fill={playerSymbol != "cross" ? "#A8BFC9" : "#1A2A33"}
             />
-            </svg>
           </RadioGroup.Item>
           <RadioGroup.Item
             className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
             value="oval"
           >
-            <svg
+            <Oval
-              className="m-auto"
               width="32"
               height="32"
-              viewBox="0 0 64 64"
+              className={`m-auto ${playerSymbol == "oval" ? "text-navy-700" : "text-silver-700"}`}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0Zm0 18.963c-7.2 0-13.037 5.837-13.037 13.037 0 7.2 5.837 13.037 13.037 13.037 7.2 0 13.037-5.837 13.037-13.037 0-7.2-5.837-13.037-13.037-13.037Z"
-                fill={playerSymbol != "oval" ? "#A8BFC9" : "#1A2A33"}
             />
-            </svg>
           </RadioGroup.Item>
         </RadioGroup.Root>
         <p className="text-base uppercase text-silver-700">

vite.config.js

@@ -1,8 +1,24 @@
 import { defineConfig } from "vite";
 
+import svgr from "vite-plugin-svgr";
+
 export default defineConfig({
   base: "/fem-tic-tac-toe/",
   esbuild: {
     jsxInject: `import React from 'react'`,
   },
+  plugins: [
+    svgr({
+      svgrOptions: {
+        plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
+        replaceAttrValues: {
+          "#31C3BD": "currentColor",
+          "#F2B137": "currentColor",
+        },
+        svgoConfig: {
+          plugins: ["removeDimensions"],
+        },
+      },
+    }),
+  ],
 });