mkdir your-project-directory
cd your-project-directory
mkdir svgs

npm init -y
npm install xmldom
touch script_name.js

const fs = require('fs');
const path = require('path');
const { DOMParser, XMLSerializer } = require('xmldom');

// Function to generate unique class names
let classCounter = 0;
const generateClassName = () => `svg-class-${classCounter++}`;

// Function to convert SVG styles to classes and return the modified SVG and extracted CSS
function convertSVGStylesToClasses(svgString, uniqueSuffix) {
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(svgString, "image/svg+xml");

  let styles = "";
  let index = 0;

  traverseNodes(svgDoc.documentElement);
  extractStyleElements(svgDoc);

  const modifiedSVG = new XMLSerializer().serializeToString(svgDoc);
  return { svg: modifiedSVG, css: styles };

  function traverseNodes(node) {
    if (node.nodeType === 1) { // Element node
      const attributes = ["fill", "stroke", "stroke-width"];
      let style = "";
      let hasStyle = false;

      attributes.forEach(attr => {
        if (node.hasAttribute(attr)) {
          style += `${attr}: ${node.getAttribute(attr)}; `;
          node.removeAttribute(attr);
          hasStyle = true;
        }
      });

      if (node.hasAttribute('style')) {
        const inlineStyle = node.getAttribute('style');
        style += `${inlineStyle} `;
        node.removeAttribute('style');
        hasStyle = true;
      }

      if (hasStyle) {
        const className = `svg-class-${uniqueSuffix}-${index++}`;
        node.setAttribute("class", className);
        styles += `.${className} { ${style} }n`;
      }
    }

    // Recursively traverse child nodes
    for (let child = node.firstChild; child; child = child.nextSibling) {
      traverseNodes(child);
    }
  }

  function extractStyleElements(svgDoc) {
    const styleElements = svgDoc.getElementsByTagName('style');
    for (let i = 0; i < styleElements.length; i++) {
      styleElements[i].parentNode.removeChild(styleElements[i]);
    }
  }
}

// Function to process SVG files in a directory and save processed files in another directory
function processSVGFiles(inputDirectory, outputDirectory) {
  const files = fs.readdirSync(inputDirectory).filter(file => path.extname(file) === '.svg');
  let combinedStyles = "";

  files.forEach((file, fileIndex) => {
    const filePath = path.join(inputDirectory, file);
    const svgContent = fs.readFileSync(filePath, 'utf-8');

    const uniqueSuffix = `file${fileIndex}`;
    const { svg: modifiedSVG, css } = convertSVGStylesToClasses(svgContent, uniqueSuffix);
    combinedStyles += css;

    const outputFilePath = path.join(outputDirectory, file); // Use original filename
    fs.writeFileSync(outputFilePath, modifiedSVG, 'utf-8');
    console.log(`Processed ${file}`);
  });

  const cssFilePath = path.join(outputDirectory, 'combined_styles.css');
  fs.writeFileSync(cssFilePath, combinedStyles, 'utf-8');
  console.log(`Combined styles written to ${cssFilePath}`);
}

// Specify the input and output directories
const inputDirectory = './svgs';
const outputDirectory = './processed_svgs';

// Create the output directory if it doesn't exist
if (!fs.existsSync(outputDirectory)) {
  fs.mkdirSync(outputDirectory);
}

// Process SVG files from inputDirectory and save processed files to outputDirectory
processSVGFiles(inputDirectory, outputDirectory);

your-project-directory/
│
├── svgs/
│ ├── svg1.svg
│ ├── svg2.svg
│ ├── svg3.svg
│ └── … (your other SVG files)
│
├── node_modules/
│ └── … (generated after running npm install)
│
├── package.json
│
├── script_name.js
│
└── combined_styles.css (generated by the script)

Please check If this work or not

tried several ways for