import { Plugin } from "vite"; import { readFileSync, readdirSync } from "fs"; let idPerfix = ""; const svgTitle = /+].*?)>/; const clearHeightWidth = /(width|height)="([^>+].*?)"/g; const hasViewBox = /(viewBox="[^>+].*?")/g; const clearReturn = /(\r)|(\n)/g; function findSvgFile(dir: string): string[] { const svgRes = []; const dirents = readdirSync(dir, { withFileTypes: true, }); for (const dirent of dirents) { if (dirent.isDirectory()) { svgRes.push(...findSvgFile(dir + dirent.name + "/")); } else { const svg = readFileSync(dir + dirent.name) .toString() .replace(clearReturn, "") .replace(svgTitle, (_, $2) => { let width = 0; let height = 0; let content = $2.replace(clearHeightWidth, (s1, s2, s3) => { if (s2 === "width") { width = s3; } else if (s2 === "height") { height = s3; } return ""; }); if (!hasViewBox.test($2)) { content += `viewBox="0 0 ${width} ${height}"`; } return ``; }) .replace("", ""); svgRes.push(svg); } } return svgRes; } export const svgBuilder = (path: string, perfix = "icon"): Plugin => { if (path !== "") { idPerfix = perfix; const res = findSvgFile(path); return { name: "svg-transform", transformIndexHtml(html): string { return html.replace( "", ` ` ); }, }; } };