fuchengshen
2022-06-28 2425be3bdfce9480536733eba5977ee2c942d7a4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { Plugin } from "vite";
import { readFileSync, readdirSync } from "fs";
 
let idPerfix = "";
const svgTitle = /<svg([^>+].*?)>/;
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, (_: any, $2: any) => {
                    let width = 0;
                    let height = 0;
                    let content = $2.replace(clearHeightWidth, (_: any, s2: any, s3: any) => {
                        if (s2 === "width") {
                            width = s3;
                        } else if (s2 === "height") {
                            height = s3;
                        }
                        return "";
                    });
                    if (!hasViewBox.test($2)) {
                        content += `viewBox="0 0 ${width} ${height}"`;
                    }
                    return `<symbol id="${idPerfix}-${dirent.name.replace(
                        ".svg",
                        ""
                    )}" ${content}>`;
                })
                .replace("</svg>", "</symbol>");
            svgRes.push(svg);
        }
    }
    return svgRes;
}
 
export const svgBuilder = (path: string, perfix = "icon"): Plugin | null => {
    if (path !== "") {
        idPerfix = perfix;
        const res = findSvgFile(path);
        return {
            name: "svg-transform",
            transformIndexHtml(html): string {
                return html.replace(
                    "<body>",
                    `
          <body>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
              ${res.join("")}
            </svg>
        `
                );
            }
        };
    } else {
        return null;
    }
};