iconfont cache

package.json

@@ -117,5 +117,8 @@
       "release": true
     }
   },
-  "packageManager": "pnpm@7.17.0"
+  "packageManager": "pnpm@7.17.0",
+  "dependencies": {
+    "crypto-js": "^4.2.0"
+  }
 }

packages/icons-webfont/.build/build-outline.mjs

@@ -1,30 +1,61 @@
 import outlineStroke from 'svg-outline-stroke'
 import { asyncForEach, getCompileOptions, getPackageDir, HOME_DIR, readSvgs } from '../../../.build/helpers.mjs'
 import fs from 'fs'
-import { resolve } from 'path'
+import { resolve, basename } from 'path'
+import crypto from 'crypto'
+import { glob } from 'glob'
+import { execSync } from 'child_process'
 
 const DIR = getPackageDir('icons-webfont')
 
 const buildOutline = async () => {
-  let files = readSvgs()
-  const compileOptions = getCompileOptions()
+  let files = readSvgs(),
+    filesList = []
 
-  const iconfontUnicode = JSON.parse(fs.readFileSync(resolve(HOME_DIR, 'tags.json'), 'utf-8'))
+  const compileOptions = getCompileOptions(),
+    iconfontUnicode = JSON.parse(fs.readFileSync(resolve(HOME_DIR, 'tags.json'), 'utf-8'))
 
-  await asyncForEach(files, async function({ name, contents }) {
+  await asyncForEach(files, async function ({ name, contents }) {
     if (compileOptions.includeIcons.length === 0 || compileOptions.includeIcons.indexOf(name) >= 0) {
 
       if (iconfontUnicode[name]) {
         const unicode = iconfontUnicode[name].unicode
-        await console.log('Stroke for:', name, unicode)
+        console.log('Stroke for:', name, unicode)
+
+        let filename = `${name}.svg`
+        if (unicode) {
+          filename = `u${unicode.toUpperCase()}-${name}.svg`
+        }
+
+        filesList.push(filename)
 
         contents = contents
-            .replace('width="24"', 'width="1000"')
-            .replace('height="24"', 'height="1000"')
+          .replace('width="24"', 'width="1000"')
+          .replace('height="24"', 'height="1000"')
 
         if (compileOptions.strokeWidth) {
           contents = contents
-              .replace('stroke-width="2"', `stroke-width="${compileOptions.strokeWidth}"`)
+            .replace('stroke-width="2"', `stroke-width="${compileOptions.strokeWidth}"`)
+        }
+
+        const cachedFilename = `u${unicode.toUpperCase()}-${name}.svg`;
+
+        if (unicode && fs.existsSync(resolve(DIR, `icons-outlined/${cachedFilename}`))) {
+          // Get content
+          let cachedContent = fs.readFileSync(resolve(DIR, `icons-outlined/${cachedFilename}`), 'utf-8')
+
+          // Get hash
+          let cachedHash = '';
+          cachedContent = cachedContent.replace(/<!--\!cache:([a-z0-9]+)-->/, function (m, hash) {
+            cachedHash = hash;
+            return '';
+          })
+
+          // Check hash
+          if (crypto.createHash('sha1').update(cachedContent).digest("hex") === cachedHash) {
+            console.log('Cached stroke for:', name, unicode)
+            return true;
+          }
         }
 
         await outlineStroke(contents, {
@@ -35,15 +66,44 @@ const buildOutline = async () => {
           fixedWidth: false,
           color: 'black'
         }).then(outlined => {
-          if (unicode) {
-            fs.writeFileSync(resolve(DIR, `icons-outlined/u${unicode.toUpperCase()}-${name}.svg`), outlined, 'utf-8')
-          } else {
-            fs.writeFileSync(resolve(DIR, `icons-outlined/${name}.svg`), outlined, 'utf-8')
-          }
-        }).catch(error => console.log(error))
-      }
+          filesList[filename]
+
+          // Save file
+          fs.writeFileSync(resolve(DIR, `icons-outlined/${filename}`), outlined, 'utf-8')
+
+          // Fix outline
+          execSync(`fontforge -lang=py -script .build/fix-outline.py icons-outlined/${filename}`)
+          execSync(`svgo icons-outlined/${filename}`)
+
+          // Add hash
+          const fixedFileContent = fs
+            .readFileSync(resolve(DIR, `icons-outlined/${filename}`), 'utf-8')
+            .replace(/\n/g, ' ')
+            .trim(),
+          hashString = `<!--!cache:${crypto.createHash('sha1').update(fixedFileContent).digest("hex")}-->`
+
+        // Save file
+        fs.writeFileSync(
+          resolve(DIR, `icons-outlined/${filename}`),
+          fixedFileContent + hashString,
+          'utf-8'
+        )
+      }).catch(error => console.log(error))
+}
     }
   })
+
+// Remove old files
+const existedFiles = (await glob(resolve(DIR, `icons-outlined/*.svg`))).map(file => basename(file))
+
+existedFiles.forEach(file => {
+  if (filesList.indexOf(file) === -1) {
+    console.log('Remove:', file)
+    fs.unlinkSync(resolve(DIR, `icons-outlined/${file}`))
+  }
+})
+
+console.log('Done')
 }
 
 await buildOutline()

packages/icons-webfont/.build/fix-outline.py

@@ -1,31 +1,17 @@
 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
+file = sys.argv[1]
 
 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.round()
-    glyph.simplify()
-    glyph.simplify()
-    glyph.correctDirection()
-    glyph.export("./icons-outlined/" + file)
-    glyph.clear()
-
+print (f"Correcting outline for {file}")
+glyph = font.createChar(123, file)
+glyph.importOutlines("./" + file)
+glyph.round()
+glyph.simplify()
+glyph.simplify()
+glyph.correctDirection()
+glyph.export("./" + file)
+glyph.clear()
 
 print ("Finished fixing svg outline directions!")

packages/icons-webfont/package.json

@@ -16,15 +16,12 @@
     "directory": "packages/icons-webfont"
   },
   "scripts": {
-    "build": "pnpm run clean && pnpm run copy && pnpm run build:prepare && pnpm run build:outline && pnpm run build:optimize && pnpm run build:fix-outline && pnpm run build:webfont && pnpm run build:css && pnpm run build:clean",
-    "build:prepare": "mkdir -p icons-outlined fonts && rm -fd icons-outlined/* fonts/*",
+    "build": "pnpm run copy && pnpm run build:prepare && pnpm run build:outline && pnpm run build:webfont && pnpm run build:css",
+    "build:prepare": "mkdir -p icons-outlined fonts && rm -fd fonts/*",
     "build:outline": "node .build/build-outline.mjs",
-    "build:optimize": "svgo icons-outlined/*",
-    "build:fix-outline": "fontforge -lang=py -script .build/fix-outline.py",
     "build:webfont": "rm -fd fonts/* && node .build/build-webfont.mjs",
     "build:css": "sass tabler-icons.scss tabler-icons.css --style expanded && sass tabler-icons.scss tabler-icons.min.css --style compressed",
     "build:clean": "rm -rf ./icons-outlined",
-    "clean": "rm -rf ./iconfont",
     "copy": "pnpm run copy:license",
     "copy:license": "cp ../../LICENSE ./LICENSE"
   },