1、可从每个模块里的icons/svg文件夹加载svg文件;
2、屏蔽相同名称的svg文件;
3、查找icons/svg结构的文件夹;
This commit is contained in:
tonglx 2022-05-21 08:39:30 +08:00
parent 59b6a2f73b
commit 45f4750eb8
2 changed files with 42 additions and 9 deletions

View File

@ -1,5 +1,6 @@
import { Plugin } from "vite";
import { readFileSync, readdirSync } from "fs";
import { readFileSync, readdirSync, accessSync } from "fs";
import path from "path";
let idPerfix = "";
const svgTitle = /<svg([^>+].*?)>/;
@ -9,16 +10,19 @@ const hasViewBox = /(viewBox="[^>+].*?")/g;
const clearReturn = /(\r)|(\n)/g;
function findSvgFile(dir: string): string[] {
function findSvgFile(dir: string, uniqueNames: Record<string, boolean>): string[] {
const svgRes = [];
const dirents = readdirSync(dir, {
withFileTypes: true
});
for (const dirent of dirents) {
if (dirent.isDirectory()) {
svgRes.push(...findSvgFile(dir + dirent.name + "/"));
svgRes.push(...findSvgFile(path.join(dir, dirent.name), uniqueNames));
} else if (uniqueNames[dirent.name]) {
continue;
} else {
const svg = readFileSync(dir + dirent.name)
uniqueNames[dirent.name] = true;
const svg = readFileSync(path.join(dir, dirent.name))
.toString()
.replace(clearReturn, "")
.replace(svgTitle, (_: any, $2: any) => {
@ -47,10 +51,15 @@ function findSvgFile(dir: string): string[] {
return svgRes;
}
export const svgBuilder = (path: string, perfix = "icon"): Plugin | null => {
if (path !== "") {
export const svgBuilder = (paths: string[], perfix = "icon"): Plugin | null => {
if (paths.length > 0) {
idPerfix = perfix;
const res = findSvgFile(path);
const uniqueNames: Record<string, boolean> = {};
const res = paths.reduce(
(previousValue, currentValue) =>
previousValue.concat(findSvgFile(currentValue, uniqueNames)),
[]
);
return {
name: "svg-transform",
transformIndexHtml(html): string {
@ -69,3 +78,27 @@ export const svgBuilder = (path: string, perfix = "icon"): Plugin | null => {
return null;
}
};
export const findSvgFolders = (dir: string): string[] => {
const svgFolders = [];
const dirents = readdirSync(dir, {
withFileTypes: true
});
// 找到结构为icons/svg的文件夹
for (const dirent of dirents) {
if (dirent.isDirectory()) {
const testPath =
dirent.name === "icons"
? path.join(dir, "icons/svg")
: path.join(dir, dirent.name, "icons/svg");
try {
accessSync(testPath);
svgFolders.push(testPath);
} catch (e) {
continue;
}
}
}
return svgFolders;
};

View File

@ -8,7 +8,7 @@ import Unocss from "unocss/vite";
import { presetUno } from "unocss";
import { proxy } from "./src/cool/config/proxy";
import { cool } from "./build/cool";
import { svgBuilder } from "./build/svg";
import { svgBuilder, findSvgFolders } from "./build/svg";
function resolve(dir: string) {
return path.resolve(__dirname, ".", dir);
@ -27,7 +27,7 @@ export default (): UserConfig => {
Unocss({
presets: [presetUno()]
}),
svgBuilder("./src/icons/svg/"),
svgBuilder(["./src/icons/svg/",...findSvgFolders("./src/modules/")]),
cool()
],
css: {