Merge pull request #104 from tabler/dev-iconfont-generation

.build/iconfont.scss

@@ -3,7 +3,7 @@
  * License - https://github.com/tabler/tabler-icons/blob/master/LICENSE
  */
 $ti-font-family: '<%= fileName %>' !default;
-$ti-font-path: './fonts' !default;
+$ti-font-path: 'fonts' !default;
 $ti-font-display: null !default;
 $ti-icon-prefix: 'ti' !default;
 
@@ -16,7 +16,15 @@ $ti-icon-prefix: 'ti' !default;
   src: url('#{$ti-font-path}/<%= fileName %>.eot?#iefix') format('embedded-opentype'),
     url('#{$ti-font-path}/<%= fileName %>.woff2') format('woff2'),
     url('#{$ti-font-path}/<%= fileName %>.woff') format('woff'),
-    url('#{$ti-font-path}/<%= fileName %>.ttf') format('truetype');
+    url('#{$ti-font-path}/<%= fileName %>.ttf') format('truetype'),
+    url("#{$ti-font-path}/<%= fileName %>.svg\##{$ti-font-family}") format("svg");
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: $ti-font-family;
+    src: url("#{$ti-font-path}/<%= fileName %>.svg\##{$ti-font-family}") format("svg");
+  }
 }
 
 .#{$ti-icon-prefix} {

generate.py

@@ -0,0 +1,28 @@
+import os
+import fontforge
+
+# svg2ttf library does not support fill-rule="evenodd" so after converting icons to outlineStroke we fix path directions to work with "nonzero"
+# more: https://github.com/tabler/tabler-icons/issues/13 - thanks for awesome suggestions in the issue
+
+
+print ("Running fontforge to fix svg outline directions!")
+
+def files(path):
+    for file in os.listdir(path):
+        if os.path.isfile(os.path.join(path, file)):
+            yield file
+
+# refer to https://fontforge.org/docs/scripting/python/fontforge.html for documentation
+# inspiration from https://github.com/FontCustom/fontcustom/blob/master/lib/fontcustom/scripts/generate.py
+
+font = fontforge.font()
+for file in files("./icons-outlined"):
+    print (f"Correcting outline for {file}")
+    glyph = font.createChar(123, file)
+    glyph.importOutlines("./icons-outlined/" + file)
+    glyph.correctDirection()
+    glyph.export("./icons-outlined/" + file)
+    glyph.clear()
+    
+
+print ("Finished fixing svg outline directions!")

gulpfile.js

@@ -230,7 +230,14 @@ gulp.task('iconfont-svg-outline', function (cb) {
 			}).catch(error => console.log(error));
 		});
 
-		cb();
+		// correct svg outline directions in a child process using fontforge 
+		const generate = cp.spawn("fontforge", ["-lang=py", "-script", "generate.py"], { stdio: 'inherit' });
+		generate.on("close", function (code) {
+			console.log(`Correcting svg outline directions exited with code ${code}`);
+			if (!code) {
+				cb();
+			}
+    	});
 	});
 });
 
@@ -253,9 +260,12 @@ gulp.task('iconfont', function () {
 		.pipe(iconfont({
 			fontName: 'tabler-icons',
 			prependUnicode: true,
-			formats: ['ttf', 'eot', 'woff', 'woff2'],
+			formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'],
 			normalize: true,
-			startUnicode: maxUnicode
+			startUnicode: maxUnicode,
+			fontHeight: 1000,
+			descent: 100,
+			ascent: 986.5
 		}))
 		.on('glyphs', function (glyphs, options) {
 			//glyphs json