Make it easier to compile a font with sub set of icons

3 files changed, 52 insertions, 3 deletions

diff --git a/README.md b/README.md
index c3d6acc2..8f50edd2 100644
--- a/README.md
+++ b/README.md
@@ -127,6 +127,35 @@ To load a specific version replace `latest` with the desired version number.
 <script src="https://unpkg.com/@tabler/icons@1.36.0/icons-react/dist/index.umd.js"></script>
 ```
 
+Compiling fonts:
+
+To compile fonts first install [fontforge](https://fontforge.org/en-US/)
+
+the fontforge executable needs to be in the path or you can set set the path to the downloaded fontforge executable in the package.json. If you installed in on a mac in your application directory it will be:
+```JSON
+  "compileFonts": {
+    "fontForge":"/Applications/FontForge.app/Contents/MacOS/FontForge"
+  }
+```
+To compile the fonts run:
+  npm run build-iconfont
+
+By default the stroke width is 2. You can change the stroke width by setting the package property: 
+
+```JSON
+  "compileFonts": {
+     "strokeWidth":"1.5",
+  }
+```
+
+To reduce the font file size you can choose to compile a sub set of icons. When you leave the array empty it will compile all the fonts. For example:
+
+```JSON
+  "includeIcons": {
+    "include":["alert-octagon","alert-triangle"]
+  }
+```  
+
 ### Svelte
 
 You can use [`tabler-icons-svelte`](https://github.com/benflap/tabler-icons-svelte) to use icons in your Svelte projects (see [example](https://svelte.dev/repl/e80dc63d7019431692b10a77525e7f99?version=3.31.0)):
diff --git a/gulpfile.js b/gulpfile.js
index 9f541ab7..5d57298d 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -191,6 +191,7 @@ gulp.task('iconfont-clean', function (cb) {
 		cb();
 	});
 });
+const includeIcons=typeof p.compileFonts=='object'? p.compileFonts.include:[];
 
 gulp.task('iconfont-svg-outline', function (cb) {
 
@@ -204,7 +205,11 @@ gulp.task('iconfont-svg-outline', function (cb) {
 		}
 
 		await asyncForEach(files, async function (file) {
-			const name = path.basename(file, '.svg'),
+			
+			const name = path.basename(file, '.svg');
+			
+			if (!Array.isArray( includeIcons) || includeIcons.length==0 || includeIcons.indexOf(name)>=0) {
+					
 				unicode = iconfontUnicode[name];
 
 			await console.log('Stroke for:', file, unicode);
@@ -214,6 +219,8 @@ gulp.task('iconfont-svg-outline', function (cb) {
 			strokedSVG = strokedSVG
 				.replace('width="24"', 'width="1000"')
 				.replace('height="24"', 'height="1000"');
+				if (typeof p.compileFonts=='object' && typeof p.compileFonts.strokeWidth=="string")
+				   strokedSVG = strokedSVG.replace('stroke-width="2"', `stroke-width="${p.compileFonts.strokeWidth}"`);
 
 			await outlineStroke(strokedSVG, {
 				optCurve: false,
@@ -229,6 +236,8 @@ gulp.task('iconfont-svg-outline', function (cb) {
 					fs.writeFileSync(`icons-outlined/${name}.svg`, outlined);
 				}
 			}).catch(error => console.log(error));
+			}
+			
 		});
 
 		cb();
@@ -242,8 +251,12 @@ gulp.task('iconfont-optimize', function() {
 });
 
 gulp.task('iconfont-fix-outline', function(cb) {
+	var fontForge= 'fontforge';
+	if (typeof p.compileFonts=='object' && typeof p.compileFonts.fontForge=='string')
+  	  fontForge=p.compileFonts.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}`);
 		if (!code) {
diff --git a/package.json b/package.json
index 56f9c6cf..d8ff5c53 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,9 @@
     "prebuild-react": "rm -rf ./icons-react/dist/",
     "build-react": "rollup -c",
     "optimize": "gulp optimize",
-    "release": "release-it"
+    "release": "release-it",
+    "build": "gulp build",
+    "build-iconfont": "gulp build-iconfont"
   },
   "description": "A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.",
   "keywords": [
@@ -99,5 +101,10 @@
   "peerDependencies": {
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
+  },
+  "compileFonts": {
+    "include":[],
+    "strokeWidth":"2",
+    "fontForge":"fontforge"
   }
 }