svgr icons build

.build/svgr-template.js

@@ -0,0 +1,12 @@
+function template(
+	{ template },
+	opts,
+	{ imports, componentName, props, jsx, exports },
+) {
+	return template.ast`
+    ${imports}
+    const ${componentName} = (size = 24, color = "currentColor", stroke = 2, ...props) => ${jsx}
+    ${exports}
+  `
+}
+module.exports = template;

gulpfile.js

@@ -11,7 +11,8 @@ const gulp = require('gulp'),
 	template = require('lodash.template'),
 	sass = require('node-sass'),
 	cleanCSS = require('clean-css'),
-	argv = require('minimist')(process.argv.slice(2));
+	argv = require('minimist')(process.argv.slice(2)),
+	svgr = require('@svgr/core').default;
 
 async function asyncForEach(array, callback) {
 	for (let index = 0; index < array.length; index++) {
@@ -194,7 +195,7 @@ gulp.task('iconfont-svg-outline', function (cb) {
 
 		let iconfontUnicode = {};
 
-		if(fs.existsSync('./iconfont-unicode.json')) {
+		if (fs.existsSync('./iconfont-unicode.json')) {
 			iconfontUnicode = require('./iconfont-unicode');
 		}
 
@@ -218,7 +219,7 @@ gulp.task('iconfont-svg-outline', function (cb) {
 				fixedWidth: true,
 				color: 'black'
 			}).then(outlined => {
-				if(unicode) {
+				if (unicode) {
 					fs.writeFileSync(`icons-outlined/u${unicode.toUpperCase()}-${name}.svg`, outlined);
 				} else {
 					fs.writeFileSync(`icons-outlined/${name}.svg`, outlined);
@@ -233,10 +234,10 @@ gulp.task('iconfont-svg-outline', function (cb) {
 gulp.task('iconfont', function () {
 	let maxUnicode = 59905;
 
-	if(fs.existsSync('./iconfont-unicode.json')) {
+	if (fs.existsSync('./iconfont-unicode.json')) {
 		const iconfontUnicode = require('./iconfont-unicode');
 
-		for(const name in iconfontUnicode) {
+		for (const name in iconfontUnicode) {
 			const unicode = parseInt(iconfontUnicode[name], 16);
 
 			maxUnicode = Math.max(maxUnicode, unicode);
@@ -258,7 +259,7 @@ gulp.task('iconfont', function () {
 			let glyphsObject = {};
 
 			//sort glypht
-			glyphs = glyphs.sort(function(a, b){
+			glyphs = glyphs.sort(function (a, b) {
 				return ('' + a.name).localeCompare(b.name)
 			});
 
@@ -399,7 +400,7 @@ gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) {
 }));
 
 gulp.task('optimize', function (cb) {
-	const addFloats = function(n1, n2) {
+	const addFloats = function (n1, n2) {
 		return Math.round((parseFloat(n1) + parseFloat(n2)) * 1000) / 1000
 	};
 
@@ -418,20 +419,20 @@ gulp.task('optimize', function (cb) {
 				.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){
+				.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)}"`;
 				})
-				.replace(/<path d="M([0-9.]*) ([0-9.]*)v\s?([0-9.]*)"/g, function(f, r1, r2, r3){
+				.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)}"`;
 				})
-				.replace(/<path d="M([0-9.]*) ([0-9.]*)h\s?([0-9.]*)"/g, function(f, r1, 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}"`;
 				});
 
 			//  
 			//
 
-			if(svgFile.toString() !== svgFileContent) {
+			if (svgFile.toString() !== svgFileContent) {
 				fs.writeFileSync(file, svgFileContent);
 			}
 		});
@@ -526,7 +527,6 @@ gulp.task('changelog-image', function (cb) {
 	}
 });
 
-
 gulp.task('svg-to-png', gulp.series('build-jekyll', 'clean-png', async (cb) => {
 	let files = glob.sync("./icons/*.svg");
 
@@ -541,4 +541,57 @@ gulp.task('svg-to-png', gulp.series('build-jekyll', 'clean-png', async (cb) => {
 	cb();
 }));
 
+gulp.task('clean-react', function (cb) {
+	cp.exec('rm -fd ./icons-react/* && mkdir icons-react/icons-js', function () {
+		cb();
+	});
+});
+
+gulp.task('svg-to-react', gulp.series('clean-react', async function (cb) {
+	let files = glob.sync("./icons/*.svg");
+
+	const camelize = function (str) {
+		str = str.replace(/-/g, ' ');
+
+		return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
+			return word.toUpperCase();
+		}).replace(/\s+/g, '');
+	};
+
+	const componentName = function (file) {
+		file = path.basename(file, '.svg');
+		file = camelize(`Icon ${file}`);
+
+		return file;
+	};
+
+	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; }\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);
+
+		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/index.js', indexCode);
+		fs.writeFileSync('icons-react/index.d.js', indexDCode);
+	});
+
+	cb();
+}));
+
 gulp.task('build', gulp.series('optimize', 'build-jekyll', 'build-copy', 'icons-sprite', 'icons-preview', 'svg-to-png', 'build-iconfont', 'changelog-image', 'build-zip'));

icons-react/icons-js/2fa.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const Icon2fa = (size = 24, color = "currentColor", stroke = 2, ...props) => <svg className="icon icon-tabler icon-tabler-2fa" width={size} height={size} viewBox="0 0 24 24" strokeWidth={stroke} stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M7 16h-4 l3.47 -4.66 a2 2 0 1 0 -3.47 -1.54" /><path d="M10 16v-8h4" /><line x1={10} y1={12} x2={13} y2={12} /><path d="M17 16v-6a2 2 0 0 1 4 0v6" /><line x1={17} y1={13} x2={21} y2={13} /></svg>;
+
+export default Icon2fa;

icons-react/icons-js/a-b.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const IconAB = (size = 24, color = "currentColor", stroke = 2, ...props) => <svg className="icon icon-tabler icon-tabler-a-b" width={size} height={size} viewBox="0 0 24 24" strokeWidth={stroke} stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M3 16v-5.5a2.5 2.5 0 0 1 5 0v5.5m0 -4h-5" /><line x1={12} y1={6} x2={12} y2={18} /><path d="M16 16v-8h3a2 2 0 0 1 0 4h-3m3 0a2 2 0 0 1 0 4h-3" /></svg>;
+
+export default IconAB;

icons-react/icons-js/accessible.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const IconAccessible = (size = 24, color = "currentColor", stroke = 2, ...props) => <svg className="icon icon-tabler icon-tabler-accessible" width={size} height={size} viewBox="0 0 24 24" strokeWidth={stroke} stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}><circle cx={12} cy={12} r={9} /><path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1" /><circle cx={12} cy={7.5} r={0.5} fill="currentColor" /></svg>;
+
+export default IconAccessible;

icons-react/icons-js/ad.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const IconAd = (size = 24, color = "currentColor", stroke = 2, ...props) => <svg className="icon icon-tabler icon-tabler-ad" width={size} height={size} viewBox="0 0 24 24" strokeWidth={stroke} stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}><rect x={3} y={5} width={18} height={14} rx={2} /><path d="M7 15v-4a2 2 0 0 1 4 0v4" /><line x1={7} y1={13} x2={11} y2={13} /><path d="M17 9v6h-1.5a1.5 1.5 0 1 1 1.5 -1.5" /></svg>;
+
+export default IconAd;

icons-react/icons-js/adjustments-alt.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const IconAdjustmentsAlt = (size = 24, color = "currentColor", stroke = 2, ...props) => <svg className="icon icon-tabler icon-tabler-adjustments-alt" width={size} height={size} viewBox="0 0 24 24" strokeWidth={stroke} stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}><rect x={4} y={8} width={4} height={4} /><line x1={6} y1={4} x2={6} y2={8} /><line x1={6} y1={12} x2={6} y2={20} /><rect x={10} y={14} width={4} height={4} /><line x1={12} y1={4} x2={12} y2={14} /><line x1={12} y1={18} x2={12} y2={20} /><rect x={16} y={5} width={4} height={4} /><line x1={18} y1={4} x2={18} y2={5} /><line x1={18} y1={9} x2={18} y2={20} /></svg>;
+
+export default IconAdjustmentsAlt;

icons-react/icons-js/adjustments-horizontal.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const IconAdjustmentsHorizontal = (size = 24, color = "currentColor", stroke = 2, ...props) => <svg className="icon icon-tabler icon-tabler-adjustments-horizontal" width={size} height={size} viewBox="0 0 24 24" strokeWidth={stroke} stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}><circle cx={14} cy={6} r={2} /><line x1={4} y1={6} x2={12} y2={6} /><line x1={16} y1={6} x2={20} y2={6} /><circle cx={8} cy={12} r={2} /><line x1={4} y1={12} x2={6} y2={12} /><line x1={10} y1={12} x2={20} y2={12} /><circle cx={17} cy={18} r={2} /><line x1={4} y1={18} x2={15} y2={18} /><line x1={19} y1={18} x2={20} y2={18} /></svg>;
+
+export default IconAdjustmentsHorizontal;

icons-react/icons-js/adjustments.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const IconAdjustments = (size = 24, color = "currentColor", stroke = 2, ...props) => <svg className="icon icon-tabler icon-tabler-adjustments" width={size} height={size} viewBox="0 0 24 24" strokeWidth={stroke} stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}><circle cx={6} cy={10} r={2} /><line x1={6} y1={4} x2={6} y2={8} /><line x1={6} y1={12} x2={6} y2={20} /><circle cx={12} cy={16} r={2} /><line x1={12} y1={4} x2={12} y2={14} /><line x1={12} y1={18} x2={12} y2={20} /><circle cx={18} cy={7} r={2} /><line x1={18} y1={4} x2={18} y2={5} /><line x1={18} y1={9} x2={18} y2={20} /></svg>;
+
+export default IconAdjustments;

icons-react/icons-js/alarm.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const IconAlarm = (size = 24, color = "currentColor", stroke = 2, ...props) => <svg className="icon icon-tabler icon-tabler-alarm" width={size} height={size} viewBox="0 0 24 24" strokeWidth={stroke} stroke={color} fill="none" strokeLinecap="round" strokeLinejoin="round" {...props}><circle cx={12} cy={13} r={7} /><polyline points="12 10 12 13 14 13" /><line x1={7} y1={4} x2={4.25} y2={6} /><line x1={17} y1={4} x2={19.75} y2={6} /></svg>;
+
+export default IconAlarm;