diff options
Diffstat (limited to 'gulpfile.js')
-rw-r--r-- | gulpfile.js | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 00000000..f5bedd19 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,52 @@ +const gulp = require('gulp'), + glob = require("glob"), + fs = require("fs"), + path = require("path"), + svg2img = require('svg2img'); + + +gulp.task('icons-sprite', function (cb) { + const columnsCount = 20, + padding = 16, + paddingOuter = 49, + iconSize = 24; + + glob("_site/icons/*.svg", {}, function (er, files) { + const iconsCount = files.length, + rowsCount = Math.ceil(iconsCount / columnsCount), + width = columnsCount * (iconSize + padding) + 2 * paddingOuter - padding, + height = rowsCount * (iconSize + padding) + 2 * paddingOuter - padding; + + let svgContentSymbols = '', + svgContentIcons = '', + x = paddingOuter, + y = paddingOuter; + files.forEach(function (file, i) { + let name = path.basename(file, '.svg'); + + let svgFile = fs.readFileSync(file), + svgFileContent = svgFile.toString(); + + svgFileContent = svgFileContent + .replace('<svg xmlns="http://www.w3.org/2000/svg"', `<symbol id="${name}"`) + .replace(' width="24" height="24"', '') + .replace('</svg>', '</symbol>') + .replace(/\n\s+/g, ''); + + svgContentSymbols += `\t${svgFileContent}\n`; + svgContentIcons += `\t<use xlink:href="#${name}" x="${x}" y="${y}" width="${iconSize}" height="${iconSize}" />\n`; + + x += padding + iconSize; + + if (i % columnsCount === columnsCount - 1) { + x = paddingOuter; + y += padding + iconSize; + } + }); + + const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><rect x="0" y="0" width="${width}" height="${height}" fill="#fafafa"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`; + + fs.writeFileSync('icons.svg', svgContent); + cb(); + }); +}); |