build fixes

3 files changed, 309 insertions, 356 deletions

diff --git a/.github/icons.png b/.github/icons.png
index 7a1f6e65..c0f163a0 100644
--- a/.github/icons.png
+++ b/.github/icons.png
diff --git a/gulpfile.js b/gulpfile.js
index 5f501dc8..fddb1d94 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -16,67 +16,67 @@ const gulp = require('gulp'),
 	argv = require('minimist')(process.argv.slice(2)),
 	svgParse = require('parse-svg-path'),
 	svgpath = require('svgpath'),
-	svgr = require('@svgr/core').default;
+	svgr = require('@svgr/core').default
 
 const compileOptions = {
 	includeIcons: [],
 	strokeWidth: null,
 	fontForge: "fontforge"
-};
+}
 
 if (fs.existsSync('./compile-options.json')) {
 	try {
-		const tempOptions = require('./compile-options.json');
+		const tempOptions = require('./compile-options.json')
 		if (typeof tempOptions !== "object") {
-			throw "Compile options file does not contain an json object";
+			throw "Compile options file does not contain an json object"
 		}
 
 		if (typeof tempOptions.includeIcons !== "undefined") {
 			if (!Array.isArray(tempOptions.includeIcons)) {
-				throw "property inludeIcons is not an array";
+				throw "property inludeIcons is not an array"
 			}
-			compileOptions.includeIcons = tempOptions.includeIcons;
+			compileOptions.includeIcons = tempOptions.includeIcons
 		}
 
 		if (typeof tempOptions.includeCategories !== "undefined") {
 			if (typeof tempOptions.includeCategories === "string") {
-				tempOptions.includeCategories = tempOptions.includeCategories.split(' ');
+				tempOptions.includeCategories = tempOptions.includeCategories.split(' ')
 			}
-            if (!Array.isArray(tempOptions.includeCategories)) {
-				throw "property includeCategories is not an array or string";
+			if (!Array.isArray(tempOptions.includeCategories)) {
+				throw "property includeCategories is not an array or string"
 			}
-            const tags = Object.entries(require('./tags.json'));
-        	tempOptions.includeCategories.forEach(function (category) {
-                category = category.charAt(0).toUpperCase() + category.slice(1);
+			const tags = Object.entries(require('./tags.json'))
+			tempOptions.includeCategories.forEach(function (category) {
+				category = category.charAt(0).toUpperCase() + category.slice(1)
 				for (const [icon, data] of tags) {
-                    if (data.category === category && compileOptions.includeIcons.indexOf(icon) === -1) {
-                        compileOptions.includeIcons.push(icon);
-                    }
-                }
-			});
+					if (data.category === category && compileOptions.includeIcons.indexOf(icon) === -1) {
+						compileOptions.includeIcons.push(icon)
+					}
+				}
+			})
 		}
 
 		if (typeof tempOptions.excludeIcons !== "undefined") {
-            if (!Array.isArray(tempOptions.excludeIcons)) {
-				throw "property excludeIcons is not an array";
+			if (!Array.isArray(tempOptions.excludeIcons)) {
+				throw "property excludeIcons is not an array"
 			}
-            compileOptions.includeIcons = compileOptions.includeIcons.filter(function (icon) {
-                return tempOptions.excludeIcons.indexOf(icon) === -1;
-            });
-        }
+			compileOptions.includeIcons = compileOptions.includeIcons.filter(function (icon) {
+				return tempOptions.excludeIcons.indexOf(icon) === -1
+			})
+		}
 
 		if (typeof tempOptions.strokeWidth !== "undefined") {
 			if (typeof tempOptions.strokeWidth !== "string" && typeof tempOptions.strokeWidth !== "number") {
-				throw "property strokeWidth is not a string or number";
+				throw "property strokeWidth is not a string or number"
 			}
-			compileOptions.strokeWidth = tempOptions.strokeWidth.toString();
+			compileOptions.strokeWidth = tempOptions.strokeWidth.toString()
 		}
 
 		if (typeof tempOptions.fontForge !== "undefined") {
 			if (typeof tempOptions.fontForge !== "string") {
-				throw "property fontForge is not a string";
+				throw "property fontForge is not a string"
 			}
-		  	compileOptions.fontForge = tempOptions.fontForge;
+			compileOptions.fontForge = tempOptions.fontForge
 		}
 
 	} catch (error) {
@@ -85,208 +85,163 @@ if (fs.existsSync('./compile-options.json')) {
 
 }
 
-async function asyncForEach(array, callback) {
+async function asyncForEach (array, callback) {
 	for (let index = 0; index < array.length; index++) {
-		await callback(array[index], index, array);
+		await callback(array[index], index, array)
 	}
 }
 
 const svgToPng = async (filePath, destination) => {
-	filePath = path.join(__dirname, filePath);
-
-	const htmlFilePath = path.join("file:", filePath);
-	const browser = await puppeteer.launch();
-	const page = await browser.newPage();
-
-	await page.setViewport({
-		height: 24,
-		width: 24,
-		deviceScaleFactor: 10
-	});
+	filePath = path.join(__dirname, filePath)
 
-	await page.goto(htmlFilePath);
-
-	await page.screenshot({
-		path: path.join(__dirname, destination),
-		omitBackground: true,
-		fullPage: true
-	});
-
-	await browser.close();
-
-	return page;
-};
+	await cp.exec(`rsvg-convert -h 240 ${filePath} > ${destination}`)
+}
 
 const createScreenshot = async (filePath) => {
-	try {
-		filePath = path.join(__dirname, filePath);
-
-		const fileName = filePath.replace('.svg', '');
-		const htmlFilePath = path.join("file:", filePath);
-		const browser = await puppeteer.launch();
-		const page = await browser.newPage();
-
-		await page.setViewport({
-			height: 10,
-			width: 10,
-			deviceScaleFactor: 2
-		});
-
-		await page.goto(htmlFilePath);
-
-		await page.screenshot({
-			path: `${fileName}.png`,
-			omitBackground: false,
-			fullPage: true
-		});
-
-		await browser.close();
-	} catch (error) {
-		console.error(error);
-		throw Error(error);
-	}
-};
-
+	await cp.exec(`rsvg-convert -x 2 -y 2 ${filePath} > ${filePath.replace('.svg', '.png')}`)
+	await cp.exec(`rsvg-convert -x 4 -y 4 ${filePath} > ${filePath.replace('.svg', '@2x.png')}`)
+}
 
 const printChangelog = function (newIcons, modifiedIcons, renamedIcons, pretty = false) {
 	if (newIcons.length > 0) {
 		if (pretty) {
-			console.log(`### ${newIcons.length} new icons:`);
+			console.log(`### ${newIcons.length} new icons:`)
 
 			newIcons.forEach(function (icon, i) {
-				console.log(`- \`${icon}\``);
-			});
+				console.log(`- \`${icon}\``)
+			})
 		} else {
-			let str = '';
-			str += `${newIcons.length} new icons: `;
+			let str = ''
+			str += `${newIcons.length} new icons: `
 
 			newIcons.forEach(function (icon, i) {
-				str += `\`${icon}\``;
+				str += `\`${icon}\``
 
 				if ((i + 1) <= newIcons.length - 1) {
 					str += ', '
 				}
-			});
+			})
 
-			console.log(str);
+			console.log(str)
 		}
 
-		console.log('');
+		console.log('')
 	}
 
 	if (modifiedIcons.length > 0) {
-		let str = '';
-		str += `Fixed icons: `;
+		let str = ''
+		str += `Fixed icons: `
 
 		modifiedIcons.forEach(function (icon, i) {
-			str += `\`${icon}\``;
+			str += `\`${icon}\``
 
 			if ((i + 1) <= modifiedIcons.length - 1) {
 				str += ', '
 			}
-		});
+		})
 
-		console.log(str);
-		console.log('');
+		console.log(str)
+		console.log('')
 	}
 
 	if (renamedIcons.length > 0) {
-		console.log(`Renamed icons: `);
+		console.log(`Renamed icons: `)
 
 		renamedIcons.forEach(function (icon, i) {
-			console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``);
-		});
+			console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``)
+		})
 	}
-};
+}
 
 const generateIconsPreview = function (files, destFile, cb, columnsCount = 19, paddingOuter = 7) {
 
 	const padding = 20,
-		iconSize = 24;
+		iconSize = 24
 
 	const iconsCount = files.length,
 		rowsCount = Math.ceil(iconsCount / columnsCount),
 		width = columnsCount * (iconSize + padding) + 2 * paddingOuter - padding,
-		height = rowsCount * (iconSize + padding) + 2 * paddingOuter - padding;
+		height = rowsCount * (iconSize + padding) + 2 * paddingOuter - padding
 
 	let svgContentSymbols = '',
 		svgContentIcons = '',
 		x = paddingOuter,
-		y = paddingOuter;
+		y = paddingOuter
 
 	files.forEach(function (file, i) {
-		let name = path.basename(file, '.svg');
+		let name = path.basename(file, '.svg')
 
 		let svgFile = fs.readFileSync(file),
-			svgFileContent = svgFile.toString();
+			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, '');
+			.replace(/\n\s+/g, '')
 
-		svgContentSymbols += `\t${svgFileContent}\n`;
-		svgContentIcons += `\t<use xlink:href="#${name}" x="${x}" y="${y}" width="${iconSize}" height="${iconSize}" />\n`;
+		svgContentSymbols += `\t${svgFileContent}\n`
+		svgContentIcons += `\t<use xlink:href="#${name}" x="${x}" y="${y}" width="${iconSize}" height="${iconSize}" />\n`
 
-		x += padding + iconSize;
+		x += padding + iconSize
 
 		if (i % columnsCount === columnsCount - 1) {
-			x = paddingOuter;
-			y += padding + iconSize;
+			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}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`;
+	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}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`
 
-	fs.writeFileSync(destFile, svgContent);
-	createScreenshot(destFile);
+	fs.writeFileSync(destFile, svgContent)
+	createScreenshot(destFile)
 
-	cb();
-};
+	cb()
+}
 
 //*********************************************************************************************
 
 gulp.task('iconfont-prepare', function (cb) {
 	cp.exec('mkdir -p icons-outlined/ && rm -fd ./icons-outlined/* && mkdir -p && rm -fd ./iconfont/*', function () {
-		cb();
-	});
-});
+		cb()
+	})
+})
 
 gulp.task('iconfont-clean', function (cb) {
 	cp.exec('rm -rf ./icons-outlined', function () {
-		cb();
-	});
-});
+		cb()
+	})
+})
 
 gulp.task('iconfont-svg-outline', function (cb) {
 
 	cp.exec('mkdir -p icons-outlined/ && rm -fd ./icons-outlined/*', async () => {
-		let files = glob.sync("./icons/*.svg");
+		let files = glob.sync("./icons/*.svg")
 
-		let iconfontUnicode = {};
+		let iconfontUnicode = {}
 
 		if (fs.existsSync('./.build/iconfont-unicode.json')) {
-			iconfontUnicode = require('./.build/iconfont-unicode');
+			iconfontUnicode = require('./.build/iconfont-unicode')
 		}
 
 		await asyncForEach(files, async function (file) {
 
-			const name = path.basename(file, '.svg');
+			const name = path.basename(file, '.svg')
 
-			if (compileOptions.includeIcons.length==0 || compileOptions.includeIcons.indexOf(name)>=0) {
+			if (compileOptions.includeIcons.length === 0 || compileOptions.includeIcons.indexOf(name) >= 0) {
 
-				unicode = iconfontUnicode[name];
+				unicode = iconfontUnicode[name]
 
-				await console.log('Stroke for:', file, unicode);
+				await console.log('Stroke for:', file, unicode)
 
-				let strokedSVG = fs.readFileSync(file).toString();
+				let strokedSVG = fs.readFileSync(file).toString()
 
 				strokedSVG = strokedSVG
 					.replace('width="24"', 'width="1000"')
-					.replace('height="24"', 'height="1000"');
+					.replace('height="24"', 'height="1000"')
+
 				if (compileOptions.strokeWidth) {
-					strokedSVG = strokedSVG.replace('stroke-width="2"', `stroke-width="${compileOptions.strokeWidth}"`);
+					strokedSVG = strokedSVG.replace('stroke-width="2"', `stroke-width="${compileOptions.strokeWidth}"`)
 				}
 
 				await outlineStroke(strokedSVG, {
@@ -298,52 +253,52 @@ gulp.task('iconfont-svg-outline', function (cb) {
 					color: 'black'
 				}).then(outlined => {
 					if (unicode) {
-						fs.writeFileSync(`icons-outlined/u${unicode.toUpperCase()}-${name}.svg`, outlined);
+						fs.writeFileSync(`icons-outlined/u${unicode.toUpperCase()}-${name}.svg`, outlined)
 					} else {
-						fs.writeFileSync(`icons-outlined/${name}.svg`, outlined);
+						fs.writeFileSync(`icons-outlined/${name}.svg`, outlined)
 					}
-				}).catch(error => console.log(error));
+				}).catch(error => console.log(error))
 			}
 
-		});
+		})
 
-		cb();
-	});
-});
+		cb()
+	})
+})
 
-gulp.task('iconfont-optimize', function() {
+gulp.task('iconfont-optimize', function () {
 	return gulp.src('icons-outlined/*')
 		.pipe(svgo())
-		.pipe(gulp.dest('icons-outlined'));
-});
+		.pipe(gulp.dest('icons-outlined'))
+})
 
-gulp.task('iconfont-fix-outline', function(cb) {
-	var fontForge= compileOptions.fontForge;
+gulp.task('iconfont-fix-outline', function (cb) {
+	var fontForge = compileOptions.fontForge
 
 	// correct svg outline directions in a child process using fontforge
-	const generate = cp.spawn(fontForge, ["-lang=py", "-script", "./fix-outline.py"], { stdio: 'inherit' });
+	const generate = cp.spawn(fontForge, ["-lang=py", "-script", "./fix-outline.py"], { stdio: 'inherit' })
 	generate.on("close", function (code) {
-		console.log(`Correcting svg outline directions exited with code ${code}`);
+		console.log(`Correcting svg outline directions exited with code ${code}`)
 		if (!code) {
-			cb();
+			cb()
 		}
-	});
-});
+	})
+})
 
 gulp.task('iconfont', function () {
-	let maxUnicode = 59905;
+	let maxUnicode = 59905
 
 	if (fs.existsSync('./.build/iconfont-unicode.json')) {
-		const iconfontUnicode = require('./.build/iconfont-unicode');
+		const iconfontUnicode = require('./.build/iconfont-unicode')
 
 		for (const name in iconfontUnicode) {
-			const unicode = parseInt(iconfontUnicode[name], 16);
+			const unicode = parseInt(iconfontUnicode[name], 16)
 
-			maxUnicode = Math.max(maxUnicode, unicode);
+			maxUnicode = Math.max(maxUnicode, unicode)
 		}
 	}
 
-	maxUnicode = maxUnicode + 1;
+	maxUnicode = maxUnicode + 1
 
 	return gulp.src(['icons-outlined/*.svg'])
 		.pipe(iconfont({
@@ -358,134 +313,134 @@ gulp.task('iconfont', function () {
 		}))
 		.on('glyphs', function (glyphs, options) {
 			//glyphs json
-			let glyphsObject = {};
+			let glyphsObject = {}
 
 			//sort glypht
 			glyphs = glyphs.sort(function (a, b) {
 				return ('' + a.name).localeCompare(b.name)
-			});
+			})
 
 			glyphs.forEach(function (glyph) {
-				glyphsObject[glyph.name] = glyph.unicode[0].codePointAt(0).toString(16);
-			});
+				glyphsObject[glyph.name] = glyph.unicode[0].codePointAt(0).toString(16)
+			})
 
-			fs.writeFileSync(`./.build/iconfont-unicode.json`, JSON.stringify(glyphsObject));
+			fs.writeFileSync(`./.build/iconfont-unicode.json`, JSON.stringify(glyphsObject))
 
 			//css
-			options['glyphs'] = glyphs;
-			options['v'] = p.version;
+			options['glyphs'] = glyphs
+			options['v'] = p.version
 
-			const compiled = template(fs.readFileSync('.build/iconfont.scss').toString());
-			const result = compiled(options);
+			const compiled = template(fs.readFileSync('.build/iconfont.scss').toString())
+			const result = compiled(options)
 
-			fs.writeFileSync('iconfont/tabler-icons.scss', result);
+			fs.writeFileSync('iconfont/tabler-icons.scss', result)
 
 			//html
-			const compiledHtml = template(fs.readFileSync('.build/iconfont.html').toString());
-			const resultHtml = compiledHtml(options);
+			const compiledHtml = template(fs.readFileSync('.build/iconfont.html').toString())
+			const resultHtml = compiledHtml(options)
 
-			fs.writeFileSync('iconfont/tabler-icons.html', resultHtml);
+			fs.writeFileSync('iconfont/tabler-icons.html', resultHtml)
 		})
-		.pipe(gulp.dest('iconfont/fonts'));
-});
+		.pipe(gulp.dest('iconfont/fonts'))
+})
 
 gulp.task('iconfont-css', function (cb) {
 	sass.render({
 		file: 'iconfont/tabler-icons.scss',
 		outputStyle: 'expanded'
 	}, function (err, result) {
-		fs.writeFileSync('iconfont/tabler-icons.css', result.css);
+		fs.writeFileSync('iconfont/tabler-icons.css', result.css)
 
-		const cleanOutput = new cleanCSS({}).minify(result.css);
-		fs.writeFileSync('iconfont/tabler-icons.min.css', cleanOutput.styles);
+		const cleanOutput = new cleanCSS({}).minify(result.css)
+		fs.writeFileSync('iconfont/tabler-icons.min.css', cleanOutput.styles)
 
-		cb();
-	});
-});
+		cb()
+	})
+})
 
-gulp.task('update-tags-unicode', function(cb) {
+gulp.task('update-tags-unicode', function (cb) {
 	let tags = require('./tags.json'),
-		unicodes = require('./.build/iconfont-unicode.json');
+		unicodes = require('./.build/iconfont-unicode.json')
 
-	for(let i in tags) {
+	for (let i in tags) {
 		tags[i] = {
 			...tags[i],
 			unicode: unicodes[i],
 		}
 	}
 
-	console.log('tags', tags);
+	console.log('tags', tags)
 
-	fs.writeFileSync(`tags.json`, JSON.stringify(tags, null, 2));
+	fs.writeFileSync(`tags.json`, JSON.stringify(tags, null, 2))
 
-	cb();
-});
+	cb()
+})
 
-gulp.task('build-iconfont', gulp.series('iconfont-prepare', 'iconfont-svg-outline', 'iconfont-fix-outline', 'iconfont-optimize', 'iconfont', 'iconfont-css', 'iconfont-clean', 'update-tags-unicode'));
+gulp.task('build-iconfont', gulp.series('iconfont-prepare', 'iconfont-svg-outline', 'iconfont-fix-outline', 'iconfont-optimize', 'iconfont', 'iconfont-css', 'iconfont-clean', 'update-tags-unicode'))
 
 gulp.task('build-zip', function () {
-	const version = p.version;
+	const version = p.version
 
 	return gulp.src('{icons/**/*,icons-png/**/*,icons-react/**/*,iconfont/**/*,tabler-sprite.svg,tabler-sprite-nostroke.svg}')
 		.pipe(zip(`tabler-icons-${version}.zip`))
 		.pipe(gulp.dest('packages'))
-});
+})
 
 gulp.task('build-jekyll', function (cb) {
-	const jekyll = cp.spawn("bundle", ["exec", "jekyll", "build"], { stdio: 'inherit' });
+	const jekyll = cp.spawn("bundle", ["exec", "jekyll", "build"], { stdio: 'inherit' })
 	jekyll.on("close", function (code) {
-		console.log(`Jekyll build exited with code ${code}`);
+		console.log(`Jekyll build exited with code ${code}`)
 		if (!code) {
-			cb();
+			cb()
 		}
-	});
-});
+	})
+})
 
 gulp.task('build-copy', function (cb) {
 	cp.exec('mkdir -p icons/ && rm -fd ./icons/* && cp ./_site/icons/* ./icons && cp ./_site/tags.json .', function () {
-		cb();
-	});
-});
+		cb()
+	})
+})
 
 gulp.task('clean-png', function (cb) {
 	cp.exec('rm -fd ./icons-png/*', function () {
-		cb();
-	});
-});
+		cb()
+	})
+})
 
 gulp.task('icons-sprite', function (cb) {
 	glob("_site/icons/*.svg", {}, function (er, files) {
 
-		let svgContent = '';
+		let svgContent = ''
 
 		files.forEach(function (file, i) {
 			let name = path.basename(file, '.svg'),
 				svgFile = fs.readFileSync(file),
-				svgFileContent = svgFile.toString();
+				svgFileContent = svgFile.toString()
 
 			svgFileContent = svgFileContent
 				.replace(/<svg[^>]+>/g, '')
 				.replace(/<\/svg>/g, '')
 				.replace(/\n+/g, '')
 				.replace(/>\s+</g, '><')
-				.trim();
+				.trim()
 
 			svgContent += `<symbol id="tabler-${name}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${svgFileContent}</symbol>`
-		});
+		})
 
-		let svg = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${svgContent}</defs></svg>`;
+		let svg = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${svgContent}</defs></svg>`
 
-		fs.writeFileSync('tabler-sprite.svg', svg);
-		fs.writeFileSync('tabler-sprite-nostroke.svg', svg.replace(/stroke-width="2"\s/g, ''));
-		cb();
-	});
-});
+		fs.writeFileSync('tabler-sprite.svg', svg)
+		fs.writeFileSync('tabler-sprite-nostroke.svg', svg.replace(/stroke-width="2"\s/g, ''))
+		cb()
+	})
+})
 
 gulp.task('icons-preview', function (cb) {
 	glob("icons/*.svg", {}, function (er, files) {
-		generateIconsPreview(files, '.github/icons.svg', cb);
-	});
-});
+		generateIconsPreview(files, '.github/icons.svg', cb)
+	})
+})
 
 gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) {
 
@@ -496,11 +451,11 @@ gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) {
 		paddingOuter = 3,
 		iconSize = 32,
 		width = 914,
-		height = iconSize + paddingOuter * 2;
+		height = iconSize + paddingOuter * 2
 
 	let svgContentSymbols = '',
 		svgContentIcons = '',
-		x = paddingOuter;
+		x = paddingOuter
 
 	strokes.forEach(function (stroke) {
 		let svgFileContentStroked = svgFileContent
@@ -508,42 +463,42 @@ gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) {
 			.replace(' width="24" height="24"', '')
 			.replace(' stroke-width="2"', ` stroke-width="${stroke}"`)
 			.replace('</svg>', '</symbol>')
-			.replace(/\n\s+/g, '');
+			.replace(/\n\s+/g, '')
 
-		svgContentSymbols += `\t${svgFileContentStroked}\n`;
-		svgContentIcons += `\t<use xlink:href="#icon-${stroke}" x="${x}" y="${paddingOuter}" width="${iconSize}" height="${iconSize}" />\n`;
+		svgContentSymbols += `\t${svgFileContentStroked}\n`
+		svgContentIcons += `\t<use xlink:href="#icon-${stroke}" x="${x}" y="${paddingOuter}" width="${iconSize}" height="${iconSize}" />\n`
 
-		x += padding + iconSize;
-	});
+		x += 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}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`;
+	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}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`
 
-	fs.writeFileSync('.github/icons-stroke.svg', svgContent);
-	createScreenshot('.github/icons-stroke.svg');
-	cb();
-}));
+	fs.writeFileSync('.github/icons-stroke.svg', svgContent)
+	createScreenshot('.github/icons-stroke.svg')
+	cb()
+}))
 
 gulp.task('optimize', function (cb) {
 	const addFloats = function (n1, n2) {
 		return Math.round((parseFloat(n1) + parseFloat(n2)) * 1000) / 1000
-	};
+	}
 
-	const optimizePath = function(path) {
+	const optimizePath = function (path) {
 		let transformed = svgpath(path)
 			.rel()
 			.round(3)
-			.toString();
+			.toString()
 
-		return svgParse(transformed).map(function(a){
-			return a.join(' ');
-		}).join(' ');
-	};
+		return svgParse(transformed).map(function (a) {
+			return a.join(' ')
+		}).join(' ')
+	}
 
 	glob("src/_icons/*.svg", {}, function (er, files) {
 
 		files.forEach(function (file, i) {
 			let svgFile = fs.readFileSync(file),
-				svgFileContent = svgFile.toString();
+				svgFileContent = svgFile.toString()
 
 			svgFileContent = svgFileContent
 				.replace(/><\/(polyline|line|rect|circle|path)>/g, '/>')
@@ -551,275 +506,273 @@ gulp.task('optimize', function (cb) {
 				.replace(/\s?\/>/g, ' />')
 				.replace(/\n\s*<(line|circle|path|polyline|rect)/g, "\n  <$1")
 				.replace(/polyline points="([0-9.]+)\s([0-9.]+)\s([0-9.]+)\s([0-9.]+)"/g, 'line x1="$1" y1="$2" x2="$3" y2="$4"')
-				.replace(/<path d="([^"]+)"/g, function(f, r1) {
-					r1 = optimizePath(r1);
+				.replace(/<path d="([^"]+)"/g, function (f, r1) {
+					r1 = optimizePath(r1)
 
-					return `<path d="${r1}"`;
+					return `<path d="${r1}"`
 				})
 				.replace(/d="m/g, 'd="M')
 				.replace(/([Aa])\s?([0-9.]+)\s([0-9.]+)\s([0-9.]+)\s?([0-1])\s?([0-1])\s?(-?[0-9.]+)\s?(-?[0-9.]+)/gi, '$1$2 $3 $4 $5 $6 $7 $8')
 				.replace(/\n\n+/g, "\n")
 
 				.replace(/<path d="M([0-9.]*) ([0-9.]*)l\s?([-0-9.]*) ([-0-9.]*)"/g, function (f, r1, r2, r3, r4) {
-					return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${addFloats(r2, r4)}"`;
+					return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${addFloats(r2, r4)}"`
 				})
 				.replace(/<path d="M([0-9.]*) ([0-9.]*)v\s?([-0-9.]*)"/g, function (f, r1, r2, r3) {
-					return `<line x1="${r1}" y1="${r2}" x2="${r1}" y2="${addFloats(r2, r3)}"`;
+					return `<line x1="${r1}" y1="${r2}" x2="${r1}" y2="${addFloats(r2, r3)}"`
 				})
 				.replace(/<path d="M([0-9.]*) ([0-9.]*)h\s?([-0-9.]*)"/g, function (f, r1, r2, r3) {
-					return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${r2}"`;
+					return `<line x1="${r1}" y1="${r2}" x2="${addFloats(r1, r3)}" y2="${r2}"`
 				})
 				.replace(/<path d="([^"]+)"/g, function (f, r1) {
 					r1 = r1
 						.replace(/ -0\./g, " -.")
 						.replace(/ 0\./g, " .")
 						.replace(/\s([a-z])/gi, "$1")
-						.replace(/([a-z])\s/gi, "$1");
-					return `<path d="${r1}"`;
+						.replace(/([a-z])\s/gi, "$1")
+					return `<path d="${r1}"`
 				})
-			;
 
 			if (svgFile.toString() !== svgFileContent) {
-				fs.writeFileSync(file, svgFileContent);
+				fs.writeFileSync(file, svgFileContent)
 			}
-		});
-
-		cb();
-	});
-});
+		})
 
+		cb()
+	})
+})
 
 gulp.task('changelog-commit', function (cb) {
 	cp.exec('git status', function (err, ret) {
-		let newIcons = [], modifiedIcons = [], renamedIcons = [];
+		let newIcons = [], modifiedIcons = [], renamedIcons = []
 
 		ret.replace(/new file:\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) {
-			newIcons.push(fileName);
-		});
+			newIcons.push(fileName)
+		})
 
 		ret.replace(/modified:\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) {
-			modifiedIcons.push(fileName);
-		});
+			modifiedIcons.push(fileName)
+		})
 
 		ret.replace(/renamed:\s+src\/_icons\/([a-z0-9-]+).svg -> src\/_icons\/([a-z0-9-]+).svg/g, function (m, fileNameBefore, fileNameAfter) {
-			renamedIcons.push([fileNameBefore, fileNameAfter]);
-		});
+			renamedIcons.push([fileNameBefore, fileNameAfter])
+		})
 
 		modifiedIcons = modifiedIcons.filter(function (el) {
-			return newIcons.indexOf(el) < 0;
-		});
+			return newIcons.indexOf(el) < 0
+		})
 
-		printChangelog(newIcons, modifiedIcons, renamedIcons);
+		printChangelog(newIcons, modifiedIcons, renamedIcons)
 
-		cb();
-	});
-});
+		cb()
+	})
+})
 
 gulp.task('changelog', function (cb) {
-	const version = argv['latest-tag'] || `v${p.version}`;
+	const version = argv['latest-tag'] || `v${p.version}`
 
 	if (version) {
 		cp.exec(`git diff ${version} HEAD --name-status`, function (err, ret) {
 
-			let newIcons = [], modifiedIcons = [], renamedIcons = [];
+			let newIcons = [], modifiedIcons = [], renamedIcons = []
 
 			ret.replace(/A\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) {
-				newIcons.push(fileName);
-			});
+				newIcons.push(fileName)
+			})
 
 			ret.replace(/M\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) {
-				modifiedIcons.push(fileName);
-			});
+				modifiedIcons.push(fileName)
+			})
 
 			ret.replace(/R[0-9]+\s+src\/_icons\/([a-z0-9-]+)\.svg\s+src\/_icons\/([a-z0-9-]+).svg/g, function (m, fileNameBefore, fileNameAfter) {
-				renamedIcons.push([fileNameBefore, fileNameAfter]);
-			});
+				renamedIcons.push([fileNameBefore, fileNameAfter])
+			})
 
 			modifiedIcons = modifiedIcons.filter(function (el) {
-				return newIcons.indexOf(el) < 0;
-			});
+				return newIcons.indexOf(el) < 0
+			})
 
-			printChangelog(newIcons, modifiedIcons, renamedIcons, true);
+			printChangelog(newIcons, modifiedIcons, renamedIcons, true)
 
-			cb();
-		});
+			cb()
+		})
 	}
-});
+})
 
 gulp.task('changelog-image', function (cb) {
 	const version = argv['latest-version'] || `${p.version}`,
-		newVersion = argv['new-version'] || `${p.version}`;
+		newVersion = argv['new-version'] || `${p.version}`
 
 	if (version) {
 		cp.exec(`git diff v${version} HEAD --name-status`, function (err, ret) {
 
-			let newIcons = [];
+			let newIcons = []
 
 			ret.replace(/[A]\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) {
-				newIcons.push(fileName);
-			});
+				newIcons.push(fileName)
+			})
 
 			newIcons = newIcons.map(function (icon) {
-				return `./icons/${icon}.svg`;
-			});
+				return `./icons/${icon}.svg`
+			})
 
 			if (newIcons.length > 0) {
-				generateIconsPreview(newIcons, `.github/tabler-icons-${newVersion}.svg`, cb, 6, 24);
+				generateIconsPreview(newIcons, `.github/tabler-icons-${newVersion}.svg`, cb, 6, 24)
 			} else {
-				cb();
+				cb()
 			}
-		});
+		})
 	} else {
-		cb();
+		cb()
 	}
-});
+})
 
 gulp.task('svg-to-png', gulp.series('build-jekyll', 'clean-png', async (cb) => {
-	let files = glob.sync("./icons/*.svg");
+	let files = glob.sync("./icons/*.svg")
 
 	await asyncForEach(files, async function (file, i) {
-		let name = path.basename(file, '.svg');
+		let name = path.basename(file, '.svg')
 
-		console.log('name', name);
+		console.log('name', name)
 
-		await svgToPng(file, `icons-png/${name}.png`);
-	});
+		await svgToPng(file, `icons-png/${name}.png`)
+	})
 
-	cb();
-}));
+	cb()
+}))
 
 gulp.task('clean-react', function (cb) {
 	cp.exec('rm -fd ./icons-react/* && mkdir icons-react/icons-js', function () {
-		cb();
-	});
-});
+		cb()
+	})
+})
 
 gulp.task('svg-to-react', gulp.series('clean-react', async function (cb) {
-	let files = glob.sync("./icons/*.svg");
+	let files = glob.sync("./icons/*.svg")
 
 	const camelize = function (str) {
-		str = str.replace(/-/g, ' ');
+		str = str.replace(/-/g, ' ')
 
 		return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
-			return word.toUpperCase();
-		}).replace(/\s+/g, '');
-	};
+			return word.toUpperCase()
+		}).replace(/\s+/g, '')
+	}
 
 	const componentName = function (file) {
-		file = path.basename(file, '.svg');
-		file = camelize(`Icon ${file}`);
+		file = path.basename(file, '.svg')
+		file = camelize(`Icon ${file}`)
 
-		return file;
-	};
+		return file
+	}
 
-	const optimizeSvgCode = function(svgCode) {
-		return svgCode.replace('<path stroke="none" d="M0 0h24v24H0z"/>', '');
-	};
+	const optimizeSvgCode = function (svgCode) {
+		return svgCode.replace('<path stroke="none" d="M0 0h24v24H0z"/>', '')
+	}
 
 	let indexCode = '',
-		indexDCode = `import { FC, SVGAttributes } from 'react';\n\ninterface TablerIconProps extends SVGAttributes<SVGElement> { color?: string; size?: string | number; stroke?: string | number; }\n\ntype TablerIcon = FC<TablerIconProps>;\n\n`;
+		indexDCode = `import { FC, SVGAttributes } from 'react';\n\ninterface TablerIconProps extends SVGAttributes<SVGElement> { color?: string; size?: string | number; stroke?: string | number; }\n\ntype TablerIcon = FC<TablerIconProps>;\n\n`
 
 	await asyncForEach(files, async function (file) {
 		const svgCode = optimizeSvgCode(fs.readFileSync(file).toString()),
 			fileName = path.basename(file, '.svg') + '.js',
-			iconComponentName = componentName(file);
+			iconComponentName = componentName(file)
 
 		await svgr(svgCode, {
 			icon: false,
 			svgProps: { width: '{size}', height: '{size}', strokeWidth: '{stroke}', stroke: '{color}' },
 			template: require('./.build/svgr-template')
 		}, { componentName: iconComponentName }).then(jsCode => {
-			fs.writeFileSync('icons-react/icons-js/' + fileName, jsCode);
-			indexCode += `export { default as ${iconComponentName} } from './icons-js/${fileName}';\n`;
-			indexDCode += `export const ${iconComponentName}: TablerIcon;\n`;
-		});
+			fs.writeFileSync('icons-react/icons-js/' + fileName, jsCode)
+			indexCode += `export { default as ${iconComponentName} } from './icons-js/${fileName}';\n`
+			indexDCode += `export const ${iconComponentName}: TablerIcon;\n`
+		})
 
-		fs.writeFileSync('icons-react/index.js', indexCode);
-		fs.writeFileSync('icons-react/index.d.ts', indexDCode);
-	});
+		fs.writeFileSync('icons-react/index.js', indexCode)
+		fs.writeFileSync('icons-react/index.d.ts', indexDCode)
+	})
 
-	cb();
-}));
+	cb()
+}))
 
-const setVersions = function(version, files) {
-	for(const i in files) {
-		const file = files[i];
+const setVersions = function (version, files) {
+	for (const i in files) {
+		const file = files[i]
 
 		if (fs.existsSync(`src/_icons/${file}.svg`)) {
-			let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString();
+			let svgFile = fs.readFileSync(`src/_icons/${file}.svg`).toString()
 
-			if(!svgFile.match(/version: ([0-9.]+)/i)) {
-				svgFile = svgFile.replace(/---\n<svg>/i, function(m){
-					return `version: "${version}"\n${m}`;
-				});
+			if (!svgFile.match(/version: ([0-9.]+)/i)) {
+				svgFile = svgFile.replace(/---\n<svg>/i, function (m) {
+					return `version: "${version}"\n${m}`
+				})
 
-				fs.writeFileSync(`src/_icons/${file}.svg`, svgFile);
+				fs.writeFileSync(`src/_icons/${file}.svg`, svgFile)
 			} else {
-				console.log(`File ${file} already has version`);
+				console.log(`File ${file} already has version`)
 			}
 
 		} else {
-			console.log(`File ${file} doesn't exists`);
+			console.log(`File ${file} doesn't exists`)
 		}
 	}
-};
+}
 
 gulp.task('update-icons-version', function (cb) {
 
 	const version = argv['latest-version'] || `${p.version}`,
-		newVersion = argv['new-version'] || `${p.version}`;
+		newVersion = argv['new-version'] || `${p.version}`
 
 	if (version) {
 		cp.exec(`git diff v${version} HEAD --name-status`, function (err, ret) {
 
-			let newIcons = [];
+			let newIcons = []
 
 			ret.replace(/[A]\s+src\/_icons\/([a-z0-9-]+)\.svg/g, function (m, fileName) {
-				newIcons.push(fileName);
-			});
+				newIcons.push(fileName)
+			})
 
-			if(newIcons.length) {
-				setVersions(newVersion.replace(/\.0$/, ''), newIcons);
+			if (newIcons.length) {
+				setVersions(newVersion.replace(/\.0$/, ''), newIcons)
 			}
-		});
+		})
 	}
 
-	cb();
-});
+	cb()
+})
 
-gulp.task('import-tags', function(cb) {
+gulp.task('import-tags', function (cb) {
 	fs.createReadStream('./_import.csv')
 		.pipe(csv({
 			headers: false,
 			separator: "\t"
 		}))
 		.on('data', (row) => {
-			console.log(row[0], row[1]);
+			console.log(row[0], row[1])
 
-			const filename = `src/_icons/${row[0]}.svg`;
+			const filename = `src/_icons/${row[0]}.svg`
 
-			let data = fs.readFileSync(filename).toString();
-			data = data.replace(/(---[\s\S]+?---)/, function(m, headerContent){
+			let data = fs.readFileSync(filename).toString()
+			data = data.replace(/(---[\s\S]+?---)/, function (m, headerContent) {
 
-				headerContent = headerContent.replace(/tags: .*\n/, '');
-				headerContent = headerContent.replace(/---/, `---\ntags: [${row[1]}]`);
+				headerContent = headerContent.replace(/tags: .*\n/, '')
+				headerContent = headerContent.replace(/---/, `---\ntags: [${row[1]}]`)
 
-				return headerContent;
-			});
+				return headerContent
+			})
 
-			fs.writeFileSync(filename, data);
+			fs.writeFileSync(filename, data)
 
 		})
 		.on('end', () => {
-			console.log('CSV file successfully processed');
-		});
-	cb();
-});
+			console.log('CSV file successfully processed')
+		})
+	cb()
+})
 
 gulp.task("build-react", function (cb) {
 	cp.exec("npm run build-react", function () {
-		cb();
-	});
-});
+		cb()
+	})
+})
 
-gulp.task('build', gulp.series('optimize', 'update-icons-version', 'build-jekyll', 'build-copy', 'icons-sprite', 'svg-to-react', 'build-react', 'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip'));
+gulp.task('build', gulp.series('optimize', 'update-icons-version', 'build-jekyll', 'build-copy', 'icons-sprite', 'svg-to-react', 'build-react', 'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip'))
diff --git a/package.json b/package.json
index c5c26c60..b4c538e6 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "gulp-zip": "5.0.2",
     "lodash.template": "4.5.0",
     "minimist": "1.2.5",
-    "node-sass": "4.14.1",
+    "node-sass": "7.0.1",
     "parse-svg-path": "^0.1.2",
     "puppeteer": "5.3.0",
     "release-it": "14.12.5",