first add

wangzhibo

2026-07-16 b57020623cf0c946706573bf102e548c3a544423

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { readFileSync, readdirSync } from "fs";
import { basename, extname } from "path";
import { rootDir } from "../utils";
import svgo from "svgo";
import { config } from "../config";
 
let svgIcons: string[] = [];
 
function findSvg(dir: string) {
    const arr: string[] = [];
    const dirs = readdirSync(dir, {
        withFileTypes: true,
    });
 
    // 获取当前目录的模块名
    const moduleName = dir.match(/[/\\](?:src[/\\](?:plugins|modules)[/\\])([^/\\]+)/)?.[1] || "";
 
    for (const d of dirs) {
        if (d.isDirectory()) {
            arr.push(...findSvg(dir + d.name + "/"));
        } else {
            if (extname(d.name) == ".svg") {
                const baseName = basename(d.name, ".svg");
 
                // 判断是否需要跳过拼接模块名
                let shouldSkip = config.svg.skipNames?.includes(moduleName);
 
                // 跳过包含icon-
                if (baseName.includes("icon-")) {
                    shouldSkip = true;
                }
 
                const iconName = shouldSkip ? baseName : `${moduleName}-${baseName}`;
 
                svgIcons.push(iconName);
 
                const svg = readFileSync(dir + d.name)
                    .toString()
                    .replace(/(\r)|(\n)/g, "")
                    .replace(/<svg([^>+].*?)>/, (_: any, $2: any) => {
                        let width = 0;
                        let height = 0;
                        let content = $2.replace(
                            /(width|height)="([^>+].*?)"/g,
                            (_: any, s2: any, s3: any) => {
                                if (s2 === "width") {
                                    width = s3;
                                } else if (s2 === "height") {
                                    height = s3;
                                }
                                return "";
                            },
                        );
                        if (!/(viewBox="[^>+].*?")/g.test($2)) {
                            content += `viewBox="0 0 ${width} ${height}"`;
                        }
                        return `<symbol id="icon-${iconName}" ${content}>`;
                    })
                    .replace("</svg>", "</symbol>");
 
                arr.push(svg);
            }
        }
    }
 
    return arr;
}
 
function compilerSvg() {
    svgIcons = [];
 
    return findSvg(rootDir("./src/"))
        .map((e) => {
            return svgo.optimize(e)?.data || e;
        })
        .join("");
}
 
export async function createSvg() {
    const html = compilerSvg();
 
    const code = `
if (typeof window !== 'undefined') {
    function loadSvg() {
        const svgDom = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svgDom.style.position = 'absolute';
        svgDom.style.width = '0';
        svgDom.style.height = '0';
        svgDom.setAttribute('xmlns','http://www.w3.org/2000/svg');
        svgDom.setAttribute('xmlns:link','http://www.w3.org/1999/xlink');
        svgDom.innerHTML = '${html}';
        document.body.insertBefore(svgDom, document.body.firstChild);
    }
 
    loadSvg();
}
        `;
 
    return { code, svgIcons };
}