aboutsummaryrefslogtreecommitdiff
path: root/gulpfile.js
diff options
context:
space:
mode:
Diffstat (limited to 'gulpfile.js')
-rw-r--r--gulpfile.js52
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();
+ });
+});