Просмотр исходного кода

[icon]Simplified input parameter

dufu1991 2 лет назад
Родитель
Сommit
c5a9fee8ef

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

@@ -45,7 +45,7 @@ export default defineConfig({
 });
 });
 ```
 ```
 
 
-During development, simply place the SVG files you need in the specified input folder (default: `src/lib/icons`). The plugin will automatically combine them into a single SVG symbol file and output it to the specified output folder (default: `static/fonts`). After building with Vite, the files in the public folder will be copied to the dist folder. Therefore, after building, the combined SVG symbol file will be located in the dist/fonts folder. Please refer to the [Vite Asset Handling](https://vitejs.dev/guide/assets.html#the-public-directory) documentation.
+During development, simply place the SVG files you need in the specified input folder (default: `src/lib/symbol`). The plugin will automatically combine them into a single SVG symbol file and output it to the specified output folder (default: `static/fonts`). After building with Vite, the files in the public folder will be copied to the dist folder. Therefore, after building, the combined SVG symbol file will be located in the dist/fonts folder. Please refer to the [Vite Asset Handling](https://vitejs.dev/guide/assets.html#the-public-directory) documentation.
 
 
 > Default parameters are optimized for SvelteKit projects. If you need to adapt it for non-SvelteKit projects created with Vite, please modify the configuration in vite.config.js or vite.config.ts.
 > Default parameters are optimized for SvelteKit projects. If you need to adapt it for non-SvelteKit projects created with Vite, please modify the configuration in vite.config.js or vite.config.ts.
 
 
@@ -64,18 +64,18 @@ If you need to modify the input/output folders and the filename of the combined
 
 
 This configuration will combine two symbols. **When using the STDF Icon component, please update the path to the corresponding `fonts/symbol.svg` or `fonts/icon.svg`**.
 This configuration will combine two symbols. **When using the STDF Icon component, please update the path to the corresponding `fonts/symbol.svg` or `fonts/icon.svg`**.
 
 
-Note: **The parameter should be an array** representing the configuration for multiple folders. **Each folder configuration should be an object** with `inFile` as the folder where the SVG files to be combined are located, `outFile` as the output path for the combined SVG symbol file, and `fileName` as the filename of the combined SVG symbol file. Please ensure the correctness and avoid conflicts in paths and filenames.
+Note: **The parameter should be an array** representing the configuration for multiple folders. **Each folder configuration should be an object** with `inFile` as the folder where the SVG files to be combined are located, `outFile` as the output path for the combined SVG symbol file, and `fileName` as the filename of the combined SVG symbol file (if not passed, the last folder name of `inFile` will be used). Please ensure the correctness and avoid conflicts in paths and filenames.
 
 
 In general, the use of symbols is to combine a series of small, single-color SVG files into one symbol. This allows for easy modification of attributes such as color, size, and opacity when using SVG in a project. Therefore, when default configuring rollup-plugin-stdf-icon, the color attributes of the SVG files themselves are removed. If you need to use multi-color SVG files and want to preserve the colors in the generated symbol, you just need to set the `simple` parameter to `false`.
 In general, the use of symbols is to combine a series of small, single-color SVG files into one symbol. This allows for easy modification of attributes such as color, size, and opacity when using SVG in a project. Therefore, when default configuring rollup-plugin-stdf-icon, the color attributes of the SVG files themselves are removed. If you need to use multi-color SVG files and want to preserve the colors in the generated symbol, you just need to set the `simple` parameter to `false`.
 
 
 # Configuration
 # Configuration
 
 
-| Parameter | Default         | Description                                                                                                   |
-| --------- | --------------- | ------------------------------------------------------------------------------------------------------------- |
-| inFile    | 'src/lib/icons' | The folder where all the SVG files to be merged are located.                                                  |
-| outFile   | 'static/fonts'  | The output path for the merged SVG symbol file.                                                               |
-| fileName  | 'symbol'        | The filename of the merged SVG symbol file.                                                                   |
-| simple    | true            | Whether to use the simple mode, the simple mode will remove the color attributes of the SVG files themselves. |
+| Parameter | Default          | Description                                                                                                   |
+| --------- | ---------------- | ------------------------------------------------------------------------------------------------------------- |
+| inFile    | 'src/lib/symbol' | The folder where all the SVG files to be merged are located.                                                  |
+| outFile   | 'static/fonts'   | The output path for the merged SVG symbol file.                                                               |
+| fileName  | ''               | The filename of the merged SVG symbol file (if not passed, the last folder name of `inFile` will be used).    |
+| simple    | true             | Whether to use the simple mode, the simple mode will remove the color attributes of the SVG files themselves. |
 
 
 # License
 # License
 
 

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

@@ -45,7 +45,7 @@ export default defineConfig({
 });
 });
 ```
 ```
 
 
-开发过程中只需要将用到的 svg 文件放到指定的入口文件夹(默认 `src/lib/icons`),插件会自动将其合并为一个 SVG symbol 文件,输出到指定的输出文件夹(默认 `static/fonts`)。Vite 构建之后 public 文件夹下的文件会被复制到 dist 文件夹下,所以在构建之后,合并的 SVG symbol 文件会出现在 dist/fonts 文件夹下。请参考 [Vite 配置](https://cn.vitejs.dev/guide/assets.html#the-public-directory)。
+开发过程中只需要将用到的 svg 文件放到指定的入口文件夹(默认 `src/lib/symbol`),插件会自动将其合并为一个 SVG symbol 文件,输出到指定的输出文件夹(默认 `static/fonts`)。Vite 构建之后 public 文件夹下的文件会被复制到 dist 文件夹下,所以在构建之后,合并的 SVG symbol 文件会出现在 dist/fonts 文件夹下。请参考 [Vite 配置](https://cn.vitejs.dev/guide/assets.html#the-public-directory)。
 
 
 > 默认参数优先适配 SvelteKit 项目,如果需要适配 Vite 创建的非 SvelteKit 项目,请修改 vite.config.js 或 vite.config.ts 中的配置。
 > 默认参数优先适配 SvelteKit 项目,如果需要适配 Vite 创建的非 SvelteKit 项目,请修改 vite.config.js 或 vite.config.ts 中的配置。
 
 
@@ -64,18 +64,18 @@ export default defineConfig({
 
 
 此配置会合并两个 symbol。**此时使用 STDF 的 Icon 组件时,请配合修改 path 为对应的 `fonts/symbol.svg` 或 `fonts/icon.svg`**
 此配置会合并两个 symbol。**此时使用 STDF 的 Icon 组件时,请配合修改 path 为对应的 `fonts/symbol.svg` 或 `fonts/icon.svg`**
 
 
-注意:**传入参数为数组**,表示多个文件夹的配置。**每个文件夹的配置为一个对象**,对象中的 inFile 为将要被合并的 SVG 文件所在的文件夹,outFile 为合并后的 SVG symbol 文件的输出路径,fileName 为合并后的 SVG symbol 文件的文件名。请注意路径与文件名的正确性与冲突。
+注意:**传入参数为数组**,表示多个文件夹的配置。**每个文件夹的配置为一个对象**,对象中的 inFile 为将要被合并的 SVG 文件所在的文件夹,outFile 为合并后的 SVG symbol 文件的输出路径,fileName 为合并后的 SVG symbol 文件的文件名(如果不传则取 inFile 的最后一个文件夹名称)。请注意路径与文件名的正确性与冲突。
 
 
 一般来说,使用 symbol 的场景是将一系列小的单色 svg 合并为一个 symbol,可以方便项目使用 svg 时修改颜色、大小、透明度等属性,所以默认配置下 rollup-plugin-stdf-icon 会去除掉 svg 本身的颜色属性。如果需要使用多色 svg,合成的 symbol 需要保留 svg 本身的颜色,只需要将 `simple` 参数设置为 `false`。
 一般来说,使用 symbol 的场景是将一系列小的单色 svg 合并为一个 symbol,可以方便项目使用 svg 时修改颜色、大小、透明度等属性,所以默认配置下 rollup-plugin-stdf-icon 会去除掉 svg 本身的颜色属性。如果需要使用多色 svg,合成的 symbol 需要保留 svg 本身的颜色,只需要将 `simple` 参数设置为 `false`。
 
 
 # 配置
 # 配置
 
 
-| 参数     | 默认            | 描述                                                |
-| -------- | --------------- | --------------------------------------------------- |
-| inFile   | 'src/lib/icons' | 将要被合并的所有 SVG 文件所在的文件夹。             |
-| outFile  | 'static/fonts'  | 合并后的 SVG symbol 文件的输出路径。                |
-| fileName | 'symbol'        | 合并后的 SVG symbol 文件的文件名 |
-| simple   | true            | 是否使用简单模式,简单模式会将 svg 自带的颜色去除。 |
+| 参数     | 默认             | 描述                                                                           |
+| -------- | ---------------- | ------------------------------------------------------------------------------ |
+| inFile   | 'src/lib/symbol' | 将要被合并的所有 SVG 文件所在的文件夹。                                        |
+| outFile  | 'static/fonts'   | 合并后的 SVG symbol 文件的输出路径。                                           |
+| fileName | ''               | 合并后的 SVG symbol 文件的文件名(如果不传则取 inFile 的最后一个文件夹名称)。 |
+| simple   | true             | 是否使用简单模式,简单模式会将 svg 自带的颜色去除。                            |
 
 
 # 许可证
 # 许可证
 
 

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

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

+ 32 - 29
packages/rollup-plugin-stdf-icon/src/index.js

@@ -7,18 +7,19 @@ import svgstore from 'svgstore';
 export default function svgSprite(datas) {
 export default function svgSprite(datas) {
 	// 可接收多组参数,处理多个文件夹内的文件
 	// 可接收多组参数,处理多个文件夹内的文件
 	// Multiple parameters can be accepted to process files in multiple folders
 	// Multiple parameters can be accepted to process files in multiple folders
-	const data = datas ? datas : [{ inFile: 'src/lib/icons', outFile: 'static/fonts', fileName: 'symbol', simple: true }];
+	const data = datas ? datas : [{ inFile: 'src/lib/symbol', outFile: 'static/fonts', fileName: '', simple: true }];
 
 
 	// 循环处理每一组参数
 	// 循环处理每一组参数
 	// Loop through each set of parameters
 	// Loop through each set of parameters
 	data.forEach(item => {
 	data.forEach(item => {
 		const { inFile, outFile, fileName, simple = true } = item;
 		const { inFile, outFile, fileName, simple = true } = item;
-		handleFile(inFile, outFile, fileName, simple);
+		// 如果 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',
-	};
+	return { name: 'rollup-plugin-stdf-icon' };
 }
 }
 
 
 // 处理一个文件夹内的文件
 // 处理一个文件夹内的文件
@@ -39,35 +40,37 @@ function handleFile(inFile, outFile, fileName, simple = true) {
 	const svgs = fs.readdirSync(inFile);
 	const svgs = fs.readdirSync(inFile);
 
 
 	svgs.forEach(svg => {
 	svgs.forEach(svg => {
-		// 读取 svg 文件内容, 作为字符串,如果是 .DS_Store 文件,则跳过
-		// Read the svg file content as a string, if it is a .DS_Store file, skip it
-		const isDSStore = svg === '.DS_Store';
-		if (isDSStore) return;
-		const code = fs.readFileSync(`${inFile}/${svg}`, 'utf8');
+		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);
+			// 使用 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 中的 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 中有 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"');
-		}
+			// 如果 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'] });
+			// 将优化后的 svg 添加到 sprites 中
+			// Add the optimized svg to sprites
+			sprites.add(svg.replace('.svg', ''), result.data, { copyAttrs: ['fill', 'stroke'] });
+		}
 	});
 	});
 
 
 	// 删除 sprites 的 <?xml...?> 标签和 <!DOCTYPE...> 标签 和 <defs/> 标签
 	// 删除 sprites 的 <?xml...?> 标签和 <!DOCTYPE...> 标签 和 <defs/> 标签