mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
🛠️ Refactor parseReactSvgContent to improve SVG handling and formatting
This commit is contained in:
@@ -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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user