🛠️ Refactor parseReactSvgContent to improve SVG handling and formatting

Author: pheralb

src/utils/parseReactSvgContent.ts

@@ -1,33 +1,46 @@
-import { parse, print, type Module } from "@swc/core";
+import prettier from "prettier";
 
 interface ParseReactSvgOptions {
   componentName: string;
   svgCode: string;
   typescript: boolean;
-  minify?: boolean;
 }
 
 export const parseReactSvgContent = async ({
   componentName,
   svgCode,
   typescript,
-  minify = false,
 }: ParseReactSvgOptions) => {
-  let structuredCode = "";
+  const reactifiedSvg = svgCode
+    .replace("<svg", "<svg {...props}")
+    .replace(/class="/g, 'className="')
+    .replace(/clip-rule="/g, 'clipRule="')
+    .replace(/fill-rule="/g, 'fillRule="')
+    .replace(/stroke-width="/g, 'strokeWidth="')
+    .replace(/stroke-linecap="/g, 'strokeLinecap="')
+    .replace(/stroke-linejoin="/g, 'strokeLinejoin="')
+    .replace(/stroke-dasharray="/g, 'strokeDasharray="')
+    .replace(/stroke-dashoffset="/g, 'strokeDashoffset="')
+    .replace(/stroke-miterlimit="/g, 'strokeMiterlimit="')
+    .replace(/text-anchor="/g, 'textAnchor="')
+    .replace(/xml:space="/g, 'xmlSpace="');
 
+  let structuredCode = "";
   if (typescript) {
     structuredCode =
       `import * as React from 'react';\n\n` +
-      `const ${componentName} = (props: React.SVGProps<SVGSVGElement>) => (\n  ${svgCode.replace("<svg", "<svg {...props}")}\n);\n\n` +
+      `const ${componentName} = (props: React.SVGProps<SVGSVGElement>) => (\n  ${reactifiedSvg}\n);\n\n` +
       `export { ${componentName} };`;
   } else {
-    structuredCode = `const ${componentName} = (props) => (\n  ${svgCode.replace("<svg", "<svg {...props}")}\n);\n\nexport { ${componentName} };`;
+    structuredCode = `const ${componentName} = (props) => (\n  ${reactifiedSvg}\n);\n\nexport { ${componentName} };`;
   }
 
-  const ast: Module = await parse(structuredCode, {
-    syntax: typescript ? "typescript" : "ecmascript",
-    ...(typescript ? { tsx: true } : { jsx: true }),
+  const formatted = await prettier.format(structuredCode, {
+    parser: typescript ? "typescript" : "babel",
+    semi: true,
+    singleQuote: false,
+    trailingComma: "es5",
   });
-  const { code } = await print(ast, { minify });
-  return code;
+
+  return formatted;
 };