Introduce Docker Image for font building (#870)

* Add dockerfile

* Make the dockerfile work

* try docker container for font building

* remove workflow dep

* add docker compose file

* test docker image

* update build font flow

* update to v3

* cleanup

* add filter options for installs

* test

* revert filter on install

* optimize font building

* Rename workflow

* test and compare workflows

* test workflow

* test

* try with filter

* test old script github actions

* Fix old script

* this works?

* test script

* finialize font script

* remove workspace packages

* add pnpm-lock.yaml in workflows

.github/workflows/lucide-angular.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide-angular/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-angular/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-angular:

.github/workflows/lucide-font.yml

@@ -0,0 +1,59 @@
+name: Lucide font checks
+
+on:
+  pull_request:
+    paths:
+      - icons/**
+      - pnpm-lock.yaml
+  push:
+    paths:
+      - icons/**
+      - pnpm-lock.yaml
+
+jobs:
+  lucide-font:
+    runs-on: ubuntu-latest
+    container: ericfennis/lucide-font:latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2.0.1
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-lucide-font-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-lucide-font-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --filter outline-svg
+
+      - name: Outline svg Icons
+        run: pnpm build:outline-icons
+
+      - name: Create directory
+        run: mkdir lucide-font
+
+      - name: Build font
+        run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
+
+      - name: "Upload to Artifacts"
+        uses: actions/upload-artifact@v1
+        with:
+          name: lucide-font
+          path: lucide-font

.github/workflows/lucide-preact.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide-preact/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-preact/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-preact:

.github/workflows/lucide-react-native.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide-react-native/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-react-native/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-react-native:

.github/workflows/lucide-react.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide-react/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-react/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-react:

.github/workflows/lucide-solid.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide-solid/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-solid/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-solid:

.github/workflows/lucide-static.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide-static/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-static/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-static:

.github/workflows/lucide-svelte.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide-svelte/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-svelte/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-svelte:

.github/workflows/lucide-vue-next.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue-next/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-vue-next/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-vue-next:

.github/workflows/lucide-vue.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-vue/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-vue:

.github/workflows/lucide.yml

@@ -4,9 +4,11 @@ on:
   pull_request:
     paths:
       - packages/lucide/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide:

.github/workflows/release.yml

@@ -581,9 +581,10 @@ jobs:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: pre-build
+    container: ericfennis/lucide-font:latest
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v3.4.1
         with:
           node-version: 16
 
@@ -607,39 +608,19 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - name: Install FontForge
-        run: sudo apt-get install zlib1g-dev fontforge
-
-      - name: Clone sfnt2woff-zopfli repo
-        run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
-
-      - name: Install and move sfnt2woff-zopfli
-        run: |
-          cd sfnt2woff-zopfli
-          make
-          sudo mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
-
-      - name: Clone woff2
-        run: git clone --recursive https://github.com/google/woff2.git
-
-      - name: Install woff2
-        run: |
-          cd woff2
-          sudo make clean all
-          sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
-
-      - name: Install Font Custom dependency
-        run: sudo gem install fontcustom
-
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --filter outline-svg
 
-      - name: Build Icon Font
-        run: |
-          mkdir lucide-font
-          pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
+      - name: Outline svg Icons
+        run: pnpm build:outline-icons
 
-      - name: 'Upload to Artifacts'
+      - name: Create directory
+        run: mkdir lucide-font
+
+      - name: Build font
+        run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
+
+      - name: "Upload to Artifacts"
         uses: actions/upload-artifact@v1
         with:
           name: lucide-font

.gitignore

@@ -12,6 +12,7 @@ stash
 coverage
 stats
 *.log
+outlined
 packages/**/src/icons/*.js
 packages/**/src/icons/*.ts
 packages/**/LICENSE

package.json

@@ -13,7 +13,7 @@
     "lucide-svelte": "pnpm --filter lucide-svelte",
     "lucide-static": "pnpm --filter lucide-static",
     "build:icons": "node ./scripts/buildIcons.mjs --templateSrc ./packages/lucide/scripts/exportTemplate.mjs",
-    "build:outline-icons": "node ./scripts/outlineSvg.mjs",
+    "build:outline-icons": "pnpm --filter outline-svg start",
     "generate:supersprite": "node ./scripts/generateSuperSVG.mjs",
     "optimize": "node ./scripts/optimizeSvgs.mjs",
     "addtags": "node ./scripts/addMissingKeysToTags.mjs",
@@ -32,6 +32,7 @@
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
+    "@rollup/plugin-typescript": "^9.0.2",
     "babel-jest": "^29.2.2",
     "babel-plugin-add-import-extension": "^1.6.0",
     "core-js": "^3.26.0",
@@ -49,10 +50,8 @@
     "prettier": "2.7.1",
     "rollup": "^3.2.4",
     "rollup-plugin-license": "^3.0.1",
-    "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.8.3",
-    "@rollup/plugin-typescript": "^9.0.2",
     "svg-outline-stroke": "^1.3.1",
     "svgo": "^3.0.0",
     "svgson": "^5.2.1"

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
   - 'packages/*'
+  - 'tools/*'
   - 'site'

scripts/Dockerfile

@@ -0,0 +1,21 @@
+## This Dockerfile is for building image for github actions
+FROM debian:stable-slim
+
+RUN apt-get update
+RUN apt-get install zlib1g-dev fontforge git build-essential ruby-full -y
+
+# sfnt2woff
+RUN git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
+WORKDIR /sfnt2woff-zopfli
+RUN make
+RUN cp sfnt2woff-zopfli /usr/local/bin/sfnt2woff
+
+# WOFF2
+WORKDIR /
+RUN git clone --recursive https://github.com/google/woff2.git
+WORKDIR /woff2
+RUN make clean all
+RUN mv woff2_compress /usr/local/bin/
+RUN mv woff2_decompress /usr/local/bin/
+
+RUN gem install fontcustom

tools/outline-svg/main.mjs

@@ -2,18 +2,12 @@ import { promises as fs } from 'fs';
 import outlineStroke from 'svg-outline-stroke';
 import { parse, stringify } from 'svgson';
 import getArgumentOptions from 'minimist';
+import path from 'path';
 
-const inputDir = `./icons/`;
+const inputDir = path.join(process.cwd(), '../../icons');
 const cliArguments = getArgumentOptions(process.argv.slice(2));
-const { outputDir } = cliArguments;
-
-const widthMap = {
-  'converted_icons-200': '1',
-  'converted_icons-300': '1.5',
-  converted_icons: '2',
-  'converted_icons-500': '2.5',
-  'converted_icons-600': '3',
-};
+const { outputDir = 'outlined' } = cliArguments;
+const targetDir = path.join(process.cwd(), '../../', outputDir);
 
 function transformForward(node) {
   if (node.name === 'svg') {
@@ -43,12 +37,15 @@ function transformBackwards(node) {
 async function init() {
   console.time('icon outliner');
   try {
-    await fs.mkdir(`./${outputDir}`);
+    try {
+      await fs.mkdir(targetDir);
+    } catch (error) {} // eslint-disable-line no-empty
 
     const icons = await fs.readdir(inputDir);
     const parsedIconNodes = await Promise.all(
       icons.map(async (file) => {
-        const iconContent = await fs.readFile(`${inputDir}${file}`);
+        const inputFilePath = path.resolve(process.cwd(), inputDir, file);
+        const iconContent = await fs.readFile(inputFilePath);
         const iconNode = await parse(iconContent.toString(), {
           transformNode: transformForward,
         });
@@ -56,19 +53,15 @@ async function init() {
       }),
     );
 
-    if (widthMap?.[outputDir] === undefined) {
-      throw new Error(`Could not find the directory: ${outputDir}.`);
-    }
-
     await Promise.all(
       parsedIconNodes.map(async ([file, iconNode]) => {
-        iconNode.attributes['stroke-width'] = widthMap[outputDir];
         const outlined = await outlineStroke(stringify(iconNode));
         const outlinedWithoutAttrs = await parse(outlined, {
           transformNode: transformBackwards,
         });
 
-        await fs.writeFile(`./${outputDir}/${file}`, stringify(outlinedWithoutAttrs));
+        const filePath = path.join(targetDir, file);
+        await fs.writeFile(filePath, stringify(outlinedWithoutAttrs));
       }),
     );
 

tools/outline-svg/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "outline-svg",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node ./main.mjs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "minimist": "^1.2.6",
+    "svg-outline-stroke": "^1.3.1",
+    "svgson": "^5.2.1"
+  }
+}