[icon]Support for multicolor svg synthesis

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

@@ -59,13 +59,16 @@ This configuration will combine two symbols. **When using the STDF Icon componen
 
 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.
 
+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 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
 
-| Parameter | Default            | Description                                   |
-| --------- | ------------------ | --------------------------------------------- |
-| inFile    | src/assets/svgs   | The folder where all the SVG files to be merged are located. |
-| outFile   | public/fonts      | The output path for the merged SVG symbol file. |
-| fileName  | symbol             | The filename of the merged SVG symbol file.    |
+| Parameter | Default         | Description                                                                                                   |
+| --------- | --------------- | ------------------------------------------------------------------------------------------------------------- |
+| inFile    | src/assets/svgs | The folder where all the SVG files to be merged are located.                                                  |
+| outFile   | public/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. |
 
 # License
 

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

@@ -57,13 +57,16 @@ export default defineConfig({
 
 注意：**传入参数为数组**，表示多个文件夹的配置。**每个文件夹的配置为一个对象**，对象中的 inFile 为将要被合并的 SVG 文件所在的文件夹，outFile 为合并后的 SVG symbol 文件的输出路径，fileName 为合并后的 SVG symbol 文件的文件名。请注意路径与文件名的正确性与冲突。
 
+一般来说，使用 symbol 的场景是将一系列小的单色 svg 合并为一个 symbol，可以方便项目使用 svg 时修改颜色、大小、透明度等属性，所以配置下 rollup-plugin-stdf-icon 会去除掉 svg 本身的颜色属性。如果需要使用多色 svg，合成的 symbol 需要保留 svg 本身的颜色，只需要将 `simple` 参数设置为 `false`。
+
 # 配置
 
-| 参数     | 默认            | 描述                                    |
-| -------- | --------------- | --------------------------------------- |
-| inFile   | src/assets/svgs | 将要被合并的所有 SVG 文件所在的文件夹。 |
-| outFile  | public/fonts    | 合并后的 SVG symbol 文件的输出路径。    |
-| fileName | symbol          | 合并后的 SVG symbol 文件的文件名。      |
+| 参数     | 默认            | 描述                                                |
+| -------- | --------------- | --------------------------------------------------- |
+| inFile   | src/assets/svgs | 将要被合并的所有 SVG 文件所在的文件夹。             |
+| outFile  | public/fonts    | 合并后的 SVG symbol 文件的输出路径。                |
+| fileName | symbol          | 合并后的 SVG symbol 文件的文件名。                  |
+| simple   | true            | 是否使用简单模式，简单模式会将 svg 自带的颜色去除。 |
 
 # 许可证
 

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

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

packages/rollup-plugin-stdf-icon/src/index.js

@@ -7,13 +7,13 @@ import svgstore from 'svgstore';
 export default function svgSprite(datas) {
     // 可接收多组参数，处理多个文件夹内的文件
     // Multiple parameters can be accepted to process files in multiple folders
-    const data = datas ? datas : [{ inFile: 'src/assets/svgs', outFile: 'public/fonts', fileName: 'symbol' }];
+    const data = datas ? datas : [{ inFile: 'src/assets/svgs', outFile: 'public/fonts', fileName: 'symbol', simple: true }];
 
     // 循环处理每一组参数
     // Loop through each set of parameters
     data.forEach(item => {
-        const { inFile, outFile, fileName } = item;
-        handleFile(inFile, outFile, fileName);
+        const { inFile, outFile, fileName, simple = true } = item;
+        handleFile(inFile, outFile, fileName, simple);
     });
 
     return {
@@ -23,7 +23,7 @@ export default function svgSprite(datas) {
 
 // 处理一个文件夹内的文件
 // Process files in a folder
-function handleFile(inFile, outFile, fileName) {
+function handleFile(inFile, outFile, fileName, simple = true) {
     // 如果 outFile 不存在, 则创建
     // If outFile does not exist, create it
     if (!fs.existsSync(outFile)) {
@@ -47,25 +47,24 @@ function handleFile(inFile, outFile, fileName) {
         // Use SVGO for optimization
         const result = optimize(code);
 
-        // // 删除 result 中的 p-id class 等属性
-        // // Delete p-id class and other attributes in result
+        // 删除 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 (result.data.indexOf('fill=') > -1 && result.data.indexOf('fill="none"') === -1) {
+        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 (result.data.indexOf('stroke=') > -1 && result.data.indexOf('stroke="none"') === -1) {
+        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.toString();
         sprites.add(svg.replace('.svg', ''), result.data, { copyAttrs: ['fill', 'stroke'] });
     });