Как объединить относительный путь или создать уникальный идентификатор SVG, содержащийся во вложенных папках? - PullRequest
Новая
       27

Как объединить относительный путь или создать уникальный идентификатор SVG, содержащийся во вложенных папках?

0 голосов
/ 24 сентября 2019

У меня есть много значков, экспортированных "Figma" в структуре папок, я использовал grunt-svgstore для генерации листа спрайта, но в результате получаю дублированные идентификаторы.Я пытался с «allowDuplicateItems: false» и «setUniqueIds: true», но это не работает.

Структура папки:-icons--стрелка--- стрелка налево---- scale.svg--- стрелка направо---- scale.svg--checkbox--- active.svg--- inactive.svg--chevron--- левый шеврон---- scale.svg--- правой шеврон---- scale.svg--и т.д.Grunt file 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>

1 Ответ

0 голосов
/ 25 сентября 2019

Я нашел другой инструмент, который позволяет мне делать то, что мне нужно.

Решение для обмена: 

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);
    });
});
...