What is the best way to combine relative paths or create distinct identifiers for SVG files located within multiple layers of folders

Question

What is the best way to combine relative paths or create distinct identifiers for SVG files located within multiple layers of folders

I have a collection of icons exported from "Figma" organized in folders, and I'm using grunt-svgstore to create a sprite sheet. However, the result contains duplicated IDs even after trying 'allowDuplicateItems: false' and 'setUniqueIds: true' options.

Here is my folder structure:
-icons
--arrow
---arrow-left
----scale.svg
---arrow-right
----scale.svg
--checkbox
---active.svg
---inactive.svg
--chevron
---left-chevron
----scale.svg
---right-chevron
----scale.svg
--etc.

Snippet from 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');  
};

Expected outcome based on relative path:

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

Actual result obtained:

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

javascript svg npm sprite-sheet grunt-svgstore

Answer 1

Answer №1

I have discovered a new tool that perfectly meets my needs.

Here is the solution I found:

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

Answer 2

I have discovered a new tool that perfectly meets my needs.

Here is the solution I found:

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

What is the best way to combine relative paths or create distinct identifiers for SVG files located within multiple layers of folders

Answer №1

Similar questions

Are there any npm packages pre-installed in Azure functions? If there are, how can I verify their presence?

Obtain the distinct highest value for every vertical axis on a bar graph

Ways to update a nested object by utilizing the setState method

Quickly view products in Opencart will automatically close after adding them to the cart and redirecting the

Enhancing AngularJS view rendering using ngshow

The reducer I have is inexplicably returning undefined even though I'm certain it was added to combineReducers

Float: A threshold reached when adding 1 no longer has any effect

Utilize Require.js to Load Dropzone.js Library

Is there a way to send a multi-dimensional array using jQuery ajax?

Creating a realistic typewriter effect by incorporating Code Block as the input

What is the process for dynamically setting @click in vue.js?

What is causing the error message "TypeError: expressJwt is not a function" to appear? Is there a way to resolve it and fix the issue?

What happens when arithmetic operators are applied to infinity values in JavaScript?

Javascript enables dynamic field addition to tables

Developing a custom Node package in version 9.2.0 to provide compatibility with outdated Node releases

Unable to incorporate external JavaScript library into Laravel project

The error message "Type Error: val.toString is not a function - mysql npm" indicates

Tips for using ng-repeat in AngularJs to filter (key, value) pairs

Learn how to incorporate latitude and longitude coding into PHP to display a map icon that correctly redirects to the desired URL when clicked

Is there a way to transmit a div using Node.js?