Fix problems with SVGs (#100)

* Update font.yml

* Update font.yml

* Update font.yml

* Update font.yml

* Update font.yml

* Update font.yml

* Create outline_svg.js

* Update font.yml

* Update font.yml

* Update outline_svg.js

* Update font.yml

* FIX: Problems with SVGs

* FIX: Problems with SVGs

Node runs this script to fix SVG files so FontCustom can compile correctly

* Trigger on PR

* Update scripts/outline_svg.js

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

.github/workflows/font.yml

@@ -2,6 +2,8 @@ name: Build Lucide
 on:
   push:
     branches: [ master ]
+  pull_request:
+    branches: [ master ]
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
@@ -16,7 +18,10 @@ jobs:
       run: sudo apt-get update
 
     - name: Install FontForge
-      run: sudo apt-get install zlib1g-dev fontforge woff2
+      run: sudo apt-get install zlib1g-dev fontforge
+    
+    - name: Install NodeJS and Yarn
+      run: sudo apt-get install nodejs yarn
 
     - name: Clone sfnt2woff-zopfli repo
       run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
@@ -40,9 +45,17 @@ jobs:
 
     - name: Install Font Custom dependency
       run: sudo gem install fontcustom
+    
+    - name: Install "outline-stroke"
+      run: sudo yarn add svg-outline-stroke svgson
+    
+    - name: "Outline SVG"
+      run: mkdir converted_icons && node scripts/outline_svg.js
 
+    
     - name: Build 'Lucide'
-      run: echo "Building Lucide font" && fontcustom compile ./icons -h -n Lucide -o build -F
+      run: echo "Building Lucide font" && fontcustom compile ./converted_icons -h -n Lucide -o build -F
+
 
     - name: Zip 'Lucide'
       run: zip -r Lucide.zip build

scripts/outline_svg.js

@@ -0,0 +1,55 @@
+const { promises: fs } = require("fs");
+const outlineStroke = require("svg-outline-stroke");
+const { parse, stringify } = require("svgson");
+
+const inputDir = `./icons/`;
+const outputDir = `./converted_icons/`;
+
+async function init() {
+  try {
+    const files = await fs.readdir(inputDir);
+    for (let file of files) {
+      const icon = await fs.readFile(`${inputDir}${file}`);
+      const scaled = await parse(icon.toString(), {
+        transformNode: transformForward
+      });
+      const outlined = await outlineStroke(stringify(scaled));
+      const outlinedWithoutAttrs = await parse(outlined, {
+        transformNode: transformBackwards
+      });
+      await fs.writeFile(
+        `${outputDir}${file}`,
+        stringify(outlinedWithoutAttrs)
+      );
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+init();
+
+function transformForward(node) {
+  if (node.name === "svg") {
+    return {
+      ...node,
+      attributes: {
+        ...node.attributes,
+        width: 960,
+        height: 960
+      }
+    };
+  }
+  return node;
+}
+
+function transformBackwards(node) {
+  if (node.name === "svg") {
+    const { width, height, ...attributes } = node.attributes;
+    return {
+      ...node,
+      attributes
+    };
+  }
+  return node;
+}