Переглянути джерело

[icon]更新rollup-plugin-stdf-icon版本至0.1.2,并修改README文档中的fileName默认值为'symbol'以提高可用性。

dufu1991 1 рік тому
батько
коміт
c1d6c5168c

+ 1 - 1
packages/rollup-plugin-stdf-icon/README.md

@@ -78,7 +78,7 @@ In general, the use of symbols is to combine a series of small, single-color SVG
 | --------- | ------ | ---------------- | ------------------------------------------------------------------------------------------------------------- |
 | inFile    | `string` | `'src/lib/symbol'` | The folder where all the SVG files to be merged are located.                                                  |
 | outFile   | `string` | `'static/fonts'`   | The output path for the merged SVG symbol file.                                                               |
-| fileName  | `string` | `''`               | The filename of the merged SVG symbol file (if not passed, the last folder name of `inFile` will be used).    |
+| fileName  | `string` | `'symbol'`               | The filename of the merged SVG symbol file (if not passed, the last folder name of `inFile` will be used).    |
 | simple    | `boolean` | `true`             | Whether to use the simple mode, the simple mode will remove the color attributes of the SVG files themselves. |
 
 # License

+ 1 - 1
packages/rollup-plugin-stdf-icon/README_CN.md

@@ -78,7 +78,7 @@ export default defineConfig({
 | -------- | ------ | ---------------- | ------------------------------------------------------------------------------ |
 | inFile   | `string` | `'src/lib/symbol'` | 将要被合并的所有 SVG 文件所在的文件夹。                                        |
 | outFile  | `string` | `'static/fonts'`   | 合并后的 SVG symbol 文件的输出路径。                                           |
-| fileName | `string` | `''`               | 合并后的 SVG symbol 文件的文件名(如果不传则取 inFile 的最后一个文件夹名称)。 |
+| fileName | `string` | `'symbol'`               | 合并后的 SVG symbol 文件的文件名(如果不传则取 inFile 的最后一个文件夹名称)。 |
 | simple   | `boolean` | `true`             | 是否使用简单模式,简单模式会将 svg 自带的颜色去除。                            |
 
 # 许可证

+ 1 - 1
packages/rollup-plugin-stdf-icon/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rollup-plugin-stdf-icon",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"description": "A Rollup plugin that combines a series of svg into one symbol for use in the STDF project",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",

+ 92 - 89
packages/rollup-plugin-stdf-icon/src/index.ts

@@ -4,100 +4,103 @@ import { optimize } from 'svgo';
 import svgstore from 'svgstore';
 
 interface StdfIconOptions {
-    inFile?: string;
-    outFile?: string;
-    fileName?: string;
-    simple?: boolean;
+	inFile?: string;
+	outFile?: string;
+	fileName?: string;
+	simple?: boolean;
 }
 
 export default function svgSprite(datas: StdfIconOptions[] = []) {
-    // 可接收多组参数,处理多个文件夹内的文件
-    // Multiple parameters can be accepted to process files in multiple folders
-    const data = datas ? datas : [{ inFile: 'src/lib/symbol', outFile: 'static/fonts', fileName: '', simple: true }];
-
-    // 循环处理每一组参数
-    // Loop through each set of parameters
-    if (Array.isArray(data)) {
-        // 给出提示,开始处理几个文件夹
-        // Give a prompt, how many folders are being processed
-        console.log(`[rollup-plugin-stdf-icon]: ⌛ Start processing ${data.length} folders...`);
-
-        data.forEach((item: any) => {
-            const { inFile, outFile, fileName, simple = true } = item;
-            // 如果 fileName 为默认 '',则将 inFile 的最后一个文件夹作为 fileName,注意不同操作系统的路径分隔符
-            // If fileName is the default '', then the last folder of inFile is used as fileName, pay attention to the path separator of different operating systems
-            const fileNameInner = fileName ? fileName : inFile.split('/').pop();
-            handleFile(inFile, outFile, fileNameInner, simple);
-        });
-    }
-
-    return { name: 'rollup-plugin-stdf-icon' };
+	// 可接收多组参数,处理多个文件夹内的文件
+	// Multiple parameters can be accepted to process files in multiple folders
+	const data = datas ? datas : [{ inFile: 'src/lib/symbol', outFile: 'static/fonts', fileName: 'symbol', simple: true }];
+
+	// 循环处理每一组参数
+	// Loop through each set of parameters
+	if (Array.isArray(data)) {
+		// 给出提示,开始处理几个文件夹
+		// Give a prompt, how many folders are being processed
+		console.log(`[rollup-plugin-stdf-icon]: ⌛ Start processing ${data.length} folders...`);
+
+		for (const item of data) {
+			const { inFile, outFile, fileName, simple = true } = item;
+			// 如果 fileName 为默认 '',则将 inFile 的最后一个文件夹作为 fileName,注意不同操作系统的路径分隔符
+			// If fileName is the default '', then the last folder of inFile is used as fileName, pay attention to the path separator of different operating systems
+			const fileNameInner = fileName ? fileName : inFile ? inFile.split('/').pop() : 'symbol';
+			if (fileNameInner) {
+				handleFile(inFile, outFile, fileNameInner, simple);
+			}
+		}
+	}
+
+	return { name: 'rollup-plugin-stdf-icon' };
 }
 
 // 处理一个文件夹内的文件
 // Process files in a folder
-function handleFile(inFile: string, outFile: string, fileName: string, simple = true) {
-    // 如果 outFile 不存在,则创建
-    // If outFile does not exist, create it
-    if (!fs.existsSync(outFile)) {
-        fs.mkdirSync(outFile);
-    }
-
-    // 创建一个空的 svgstore
-    // Create an empty svgstore
-    const sprites = svgstore({ cleanDefs: true });
-
-    // 循环 icons 目录下的所有 svg 文件
-    // Loop through all svg files in the icons directory
-    const svgs = fs.readdirSync(inFile);
-
-    svgs.forEach((svg: string) => {
-        if (!svg.endsWith('.svg')) {
-            // 读取 svg 文件内容,如果文件不是 svg 文件,则给出提示并跳过
-            // Read the contents of the svg file, if the file is not an svg file, give a prompt and skip
-            console.warn(`[rollup-plugin-stdf-icon]: ⏭️  ${inFile}/${svg} is not a svg file, skip it!`);
-        } else {
-            const code = fs.readFileSync(`${inFile}/${svg}`, 'utf8');
-
-            // 使用 SVGO 进行优化
-            // Use SVGO for optimization
-            const result = optimize(code);
-
-            // 删除 result 中的 p-id class 等属性
-            // Delete p-id class and other attributes in result
-            result.data = result.data.replace(/p-id="[^"]*"/g, '').replace(/class="[^"]*"/g, '');
-
-            // 如果 result 中有 fill 属性,属性值不为 none, 则将 fill 属性值设置为 currentColor
-            // If there is a fill attribute in result, the attribute value is not none, then set the fill attribute value to currentColor
-            if (simple && result.data.indexOf('fill=') > -1 && result.data.indexOf('fill="none"') === -1) {
-                result.data = result.data.replace(/fill="[^"]*"/g, 'fill="currentColor"');
-            }
-
-            // 如果 result 中有 stroke 属性,属性值不为 none, 则将 stroke 属性值设置为 currentColor
-            // If there is a stroke attribute in result, the attribute value is not none, then set the stroke attribute value to currentColor
-            if (simple && result.data.indexOf('stroke=') > -1 && result.data.indexOf('stroke="none"') === -1) {
-                result.data = result.data.replace(/stroke="[^"]*"/g, 'stroke="currentColor"');
-            }
-
-            // 将优化后的 svg 添加到 sprites 中
-            // Add the optimized svg to sprites
-            sprites.add(svg.replace('.svg', ''), result.data, { copyAttrs: ['fill', 'stroke'] });
-        }
-    });
-
-    // 已完成合并(inFile)中的多少个 svg 文件至 outFile/fileName.svg
-    // Have merged how many svg files in (inFile) to outFile/fileName.svg
-    console.log(`[rollup-plugin-stdf-icon]: ✅ ${inFile} has merged ${svgs.length} svg files to ${outFile}/${fileName}.svg`);
-
-    // 删除 sprites 的 <?xml...?> 标签和 <!DOCTYPE...> 标签 和 <defs/> 标签
-    // Delete the <?xml...?> tag and <!DOCTYPE...> tag of sprites
-    const spritesStr = sprites
-        .toString()
-        .replace(/<\?xml[^>]*>/g, '')
-        .replace(/<!DOCTYPE[^>]*>/g, '')
-        .replace(/<defs\/>/g, '');
-
-    // 写入到指定的文件中
-    // Write to the specified file
-    fs.writeFileSync(outFile + '/' + fileName + '.svg', spritesStr);
+function handleFile(inFile: string | undefined, outFile: string | undefined, fileName: string, simple = true) {
+	if (!inFile || !outFile) return;
+	// 如果 outFile 不存在,则创建
+	// If outFile does not exist, create it
+	if (!fs.existsSync(outFile)) {
+		fs.mkdirSync(outFile);
+	}
+
+	// 创建一个空的 svgstore
+	// Create an empty svgstore
+	const sprites = svgstore({ cleanDefs: true });
+
+	// 循环 icons 目录下的所有 svg 文件
+	// Loop through all svg files in the icons directory
+	const svgs = fs.readdirSync(inFile);
+
+	for (const svg of svgs) {
+		if (!svg.endsWith('.svg')) {
+			// 读取 svg 文件内容,如果文件不是 svg 文件,则给出提示并跳过
+			// Read the contents of the svg file, if the file is not an svg file, give a prompt and skip
+			console.warn(`[rollup-plugin-stdf-icon]: ⏭️  ${inFile}/${svg} is not a svg file, skip it!`);
+		} else {
+			const code = fs.readFileSync(`${inFile}/${svg}`, 'utf8');
+
+			// 使用 SVGO 进行优化
+			// Use SVGO for optimization
+			const result = optimize(code);
+
+			// 删除 result 中的 p-id class 等属性
+			// Delete p-id class and other attributes in result
+			result.data = result.data.replace(/p-id="[^"]*"/g, '').replace(/class="[^"]*"/g, '');
+
+			// 如果 result 中有 fill 属性,属性值不为 none, 则将 fill 属性值设置为 currentColor
+			// If there is a fill attribute in result, the attribute value is not none, then set the fill attribute value to currentColor
+			if (simple && result.data.indexOf('fill=') > -1 && result.data.indexOf('fill="none"') === -1) {
+				result.data = result.data.replace(/fill="[^"]*"/g, 'fill="currentColor"');
+			}
+
+			// 如果 result 中有 stroke 属性,属性值不为 none, 则将 stroke 属性值设置为 currentColor
+			// If there is a stroke attribute in result, the attribute value is not none, then set the stroke attribute value to currentColor
+			if (simple && result.data.indexOf('stroke=') > -1 && result.data.indexOf('stroke="none"') === -1) {
+				result.data = result.data.replace(/stroke="[^"]*"/g, 'stroke="currentColor"');
+			}
+
+			// 将优化后的 svg 添加到 sprites 中
+			// Add the optimized svg to sprites
+			sprites.add(svg.replace('.svg', ''), result.data, { copyAttrs: ['fill', 'stroke'] });
+		}
+	}
+
+	// 已完成合并(inFile)中的多少个 svg 文件至 outFile/fileName.svg
+	// Have merged how many svg files in (inFile) to outFile/fileName.svg
+	console.log(`[rollup-plugin-stdf-icon]: ✅ ${inFile} has merged ${svgs.length} svg files to ${outFile}/${fileName}.svg`);
+
+	// 删除 sprites 的 <?xml...?> 标签和 <!DOCTYPE...> 标签 和 <defs/> 标签
+	// Delete the <?xml...?> tag and <!DOCTYPE...> tag of sprites
+	const spritesStr = sprites
+		.toString()
+		.replace(/<\?xml[^>]*>/g, '')
+		.replace(/<!DOCTYPE[^>]*>/g, '')
+		.replace(/<defs\/>/g, '');
+
+	// 写入到指定的文件中
+	// Write to the specified file
+	fs.writeFileSync(`${outFile}/${fileName}.svg`, spritesStr);
 }