I think the main issue is that you're mixing Node.js file-system operations with browser-side React code.

"fs/promises" is designed for Node.js. It cannot directly read files from a user's browser, and adding Node polyfills may increase your bundle size without solving the underlying architectural problem.

I'd suggest separating the two use cases:

1. If the SVG is uploaded by the user

Use the browser's File API instead of "fs.readFile()":

async function readSvgFile(file) {
const svgText = await file.text();
return svgText;
}

You can then parse the SVG using "DOMParser":

const parser = new DOMParser();
const document = parser.parseFromString(svgText, "image/svg+xml");

2. If the SVG is a local project asset

With Vite, you can import it as raw text:

import svgText from "./icon.svg?raw";

3. What about SVGO?

Since your code uses SVGO, I'd consider running the optimization in a Node.js environment, such as a build script or backend service, rather than importing Node-dependent functionality into the browser bundle.

If you need real-time browser-side SVG manipulation, look for a browser-compatible library or use the DOM APIs for the transformations you need.

My recommendation: Don't add Node.js polyfills as the first solution. Separate file reading from SVG optimization, and choose the environment based on where the operation runs.

Hope this helps!