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

Posted 2023-03-25

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

【英文标题】：How to concatenate relative path or generate unique identifier svg contained in nested folders?

【发布时间】：2020-01-24 03:08:05

【问题描述】：

我在文件夹结构中有许多由“Figma”导出的图标，我使用 grunt-svgstore 生成精灵表，但结果中出现了重复的 id。 我试过“allowDuplicateItems：false”和“setUniqueIds：true”，但它不起作用。

文件夹结构： -图标 --箭头 ---箭头左 ----scale.svg ---箭头右 ----scale.svg --复选框 ---active.svg ---inactive.svg --雪佛龙 ---左雪佛龙 ----scale.svg ---右雪佛龙 ----scale.svg --etc. Grunt 文件 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】：

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

分享解决方案：

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