generate-svg-sprite.js

const fs = require('fs');
const path = require('path');
const SvgSpriter = require('svg-sprite');

const ICONS_PATH = 'src/assets/icons';
const SVG_SPRITE_PATH = 'src/assets/sprite';
const SVG_SPRITE_FILENAME = 'svg-sprite.svg';

const spriter = new SvgSpriter({
  /* Main output directory */
  dest: SVG_SPRITE_PATH,
  mode: {
    css: {
      render: {
        css: false,
      },
    },
  },
  svg: {
    /* Add namespace token to all CSS class names in SVG shapes */
    namespaceClassnames: false,
  },
});

/* Get list of SVG files in directory */
function getSvgFiles(dirPath, arrayOfFiles) {
  const files = fs.readdirSync(dirPath)

  arrayOfFiles = arrayOfFiles || []

  files.forEach((file) => {
    const isDirectory = fs.statSync(`${ dirPath }/${ file }`).isDirectory();

    if (isDirectory) {
      arrayOfFiles = getSvgFiles(`${ dirPath }/${ file }`, arrayOfFiles);
    } else if (path.extname(file) === '.svg') {
      arrayOfFiles.push(path.join(dirPath, '/', file));
    }
  })

  return arrayOfFiles;
}

const svgFiles = getSvgFiles(ICONS_PATH);

/* Add SVG files to sprite */
svgFiles.forEach((svgFile) => {
  const svgPath = path.relative(ICONS_PATH, svgFile);

  spriter.add(
    svgPath,
    path.basename(svgFile),
    fs.readFileSync(svgFile, { encoding: 'utf-8' }),
  );
});

/* Compile the sprite */
spriter.compile((error, result) => {
  const destFolder = path.dirname(path.join(spriter.config.dest, SVG_SPRITE_FILENAME));

  /* Create the destination folder if it doesn't exist */
  fs.mkdir(destFolder, { recursive: true }, (error) => {
    if (error) { throw error; }

    /* Write the generated sprite to folder */
    fs.writeFile(
      path.join(spriter.config.dest, SVG_SPRITE_FILENAME),
      result.css.sprite.contents,
      (err) => { if (err) throw err; },
    );
  });
});