qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🛠️ Refactor parseReactSvgContent to improve SVG handling and formatting

Browse Source
This commit is contained in:
pheralb
2025-08-29 14:42:12 +01:00
parent dd503d4b64
commit dc54f91435
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/parseReactSvgContent.ts
+24 -11
View File
@@ -1,33 +1,46 @@
import { parse, print, type Module } from "@swc/core"; import prettier from "prettier";
interface ParseReactSvgOptions { interface ParseReactSvgOptions {
componentName: string; componentName: string;
svgCode: string; svgCode: string;
typescript: boolean; typescript: boolean;
minify?: boolean;
} }
export const parseReactSvgContent = async ({ export const parseReactSvgContent = async ({
componentName, componentName,
svgCode, svgCode,
typescript, typescript,
minify = false,
}: ParseReactSvgOptions) => { }: 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) { if (typescript) {
structuredCode = structuredCode =
`import * as React from 'react';\n\n` + `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} };`; `export { ${componentName} };`;
} else { } 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, { const formatted = await prettier.format(structuredCode, {
syntax: typescript ? "typescript" : "ecmascript", parser: typescript ? "typescript" : "babel",
...(typescript ? { tsx: true } : { jsx: true }), semi: true,
singleQuote: false,
trailingComma: "es5",
}); });
const { code } = await print(ast, { minify });
return code; return formatted;
}; };