如何连接相对路径或生成嵌套文件夹中包含的唯一标识符 svg？

Question

我在文件夹结构中 "Figma" 导出了很多图标，我使用 grunt-svgstore 生成了 sprite sheet 但我在结果中得到了重复的 ID。
我试过 "allowDuplicateItems: false" 和 "setUniqueIds: true" 但它不起作用。

文件夹结构：
-图标
--箭头
---左箭头
----scale.svg
---右箭头
----scale.svg
--复选框
---active.svg
---在active.svg
--雪佛龙
---左人字形
----scale.svg
---右人字形
----scale.svg
--等等

咕噜文件 JS:

module.exports = function(grunt) {
grunt.initConfig({
    svgstore: { 
        options: {
            formatting : {
                indent_size : 2
            },
            includeTitleElement: false,
            preserveDescElement: false,
            allowDuplicateItems: false,
            setUniqueIds: true
        },
        default: {
            files: {
                'includes/defs.svg': ['icons/**/*.svg',]
            },
        },
    }
});  
grunt.loadNpmTasks('grunt-svgstore');  
};

基于相对路径的预期结果

<svg>
  <symbol viewBox="0 0 32 32" id="arrow-arrow-left-scale">
    ...
  </symbol>
  <symbol viewBox="0 0 32 32" id="arrow-arrow-right-scale">
    ...
  </symbol>
</svg>

实际结果：

<svg>
  <symbol viewBox="0 0 32 32" id="scale">
    ...
  </symbol>
  <symbol viewBox="0 0 32 32" id="scale">
    ...
  </symbol>
</svg>

Answer 1

我找到了另一个工具，可以让我做我需要的事情。

分享解决方案：

const zipName = 'icons.zip';
//Command: gulp default
const spriteFileName = 'icons_sprite';
const gulp = require('gulp');
const svgstore = require('gulp-svgstore');
const rename = require('gulp-rename');
const path = require('path');
const admZip = require('adm-zip');
const rimraf = require('rimraf');
const fs = require('fs');

gulp.task('default', function() {
  var zip = new admZip(zipName);
  zip.extractAllTo('./icons_sources/', false, true);
  return gulp
    .src('icons_sources/**/*.svg', {base: 'icons_sprite'})
    .pipe(
      rename(function(file) {
        var name = file.dirname.split(path.sep);
        if (file.basename === 'scale') {
          name = name.filter((n) => n !== '.' && n !== '..' && n !== 'icons_sources');
          file.basename = name.join('-');
        } else {
          name = name.filter((n) => n !== '.' && n !== '..' && n !== 'icons_sources');
          if (file.basename.search(/\d+x\d+/) >= 0) {
            file.basename = 'S' + file.basename.toUpperCase();
          }
        }
      })
    )
    .pipe(svgstore())
    .pipe(gulp.dest('src/assets/sprites'))
    .on('finish', () => {
      rimraf.sync('icons_sources');
      fs.unlinkSync(zipName);
    });
});

如何连接相对路径或生成嵌套文件夹中包含的唯一标识符 svg？

How to concatenate relative path or generate unique identifier svg contained in nested folders?

javascript

svg

sprite-sheet

npm

grunt-svgstore