Update package dependencies and configurations (#1447)

* Update package dependencies and configurations * Update GitHub Actions workflow to use Node.js 22 and adjust build command to utilize pnpm for improved consistency and performance. * Remove specific pnpm version from GitHub Actions workflow to allow for more flexible dependency management. * Remove specific pnpm version from GitHub Actions workflow for improved flexibility in dependency management. * Add rsvg-convert availability check in convertIconsToImages function to prevent errors when the command is not found * Update GitHub Actions workflow to use Node.js 22 for improved compatibility and performance. * Remove push trigger from GitHub Actions workflow to streamline build process and focus on pull requests. * Add system dependencies for canvas in GitHub Actions workflow and update package.json to include canvas dependency * Update GitHub Actions workflow to install additional system dependencies for canvas and rsvg-convert * Update pnpm-lock.yaml to add canvas dependency and remove optional flags from several packages * Update package.json to upgrade pnpm from version 10.12.1 to 10.26.1 for improved performance and compatibility. * Refactor Eleventy configuration to use Sass directly and update package dependencies for improved compatibility and performance. Added support for SCSS file compilation and updated various package versions in package.json and pnpm-lock.yaml. * Reorganize GitHub Actions workflow to reposition the in-progress comment step for better clarity and execution flow during icon validation. * Update GitHub Actions workflows to install pnpm version 10.26.2 for consistency across build and validation processes. * Install additional system dependencies for canvas and rsvg-convert in GitHub Actions workflow to ensure proper build environment. * Ensure canvas is loaded before jsdom by using require in utilities.mjs * Update canvas and @napi-rs/canvas dependencies to version 3.2.0 and 0.1.88 respectively in package.json and pnpm-lock.yaml for improved compatibility. Add "onlyBuiltDependencies" field in package.json to specify required dependencies.
2025-12-30 18:33:11 +01:00 · 2025-12-30 18:33:11 +01:00 · 2702274bfa
parent f999bcc00d
commit 2702274bfa
29 changed files with 2232 additions and 2372 deletions
--- a/.build/helpers.mjs
+++ b/.build/helpers.mjs
@ -119,8 +119,8 @@ export const getAllIcons = (withContent = false, withObject = false) => {

  types.forEach((type) => {
    icons[type] = globSync(slash(path.join(ICONS_SRC_DIR, `${type}/*.svg`)))
+      .sort((a, b) => a.localeCompare(b))
      .slice(0, limit)
-      .sort()
      .map((i) => {
        const { data, content } = parseMatter(i),
          name = basename(i, '.svg');
@ -553,6 +553,17 @@ export const getCompileOptions = () => {
 };

 export const convertIconsToImages = async (dir, extension, size = 240) => {
+  const rsvgConvertAvailable = await new Promise((resolve) => {
+    exec('command -v rsvg-convert', (error) => {
+      resolve(!error);
+    });
+  });
+
+  if (!rsvgConvertAvailable) {
+    console.log(`\nWarning: rsvg-convert not found. Skipping ${extension} conversion.`);
+    return;
+  }
+
  const icons = getAllIcons();

  await asyncForEach(Object.entries(icons), async function ([type, svgFiles]) {
--- a/.build/rollup-plugins.mjs
+++ b/.build/rollup-plugins.mjs
@ -2,7 +2,6 @@ import { visualizer } from 'rollup-plugin-visualizer'
 import license from 'rollup-plugin-license'
 import esbuild from 'rollup-plugin-esbuild'
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import bundleSize from '@atomico/rollup-plugin-sizes';

 const getRollupPlugins = (pkg, minify) => {
  return [
@ -19,7 +18,6 @@ const getRollupPlugins = (pkg, minify) => {
 This source code is licensed under the ${pkg.license} license.
 See the LICENSE file in the root directory of this source tree.`
    }),
-    bundleSize(),
    visualizer({
      sourcemap: false,
      filename: `stats/${pkg.name}${minify ? '-min' : ''}.html`
--- a/.eleventy.js
+++ b/.eleventy.js
@ -1,7 +1,27 @@
-const eleventySass = require("eleventy-sass");
+const sass = require("sass");
+const path = require("path");

 module.exports = function (eleventyConfig) {
-  eleventyConfig.addPlugin(eleventySass);
+  eleventyConfig.addTemplateFormats("scss");
+  
+  eleventyConfig.addExtension("scss", {
+    outputFileExtension: "css",
+    compile: async function(inputContent, inputPath) {
+      const parsed = path.parse(inputPath);
+      if (parsed.name.startsWith("_")) {
+        return;
+      }
+      
+      const result = sass.compileString(inputContent, {
+        loadPaths: [parsed.dir || ".", path.join(process.cwd(), "src", "_includes")],
+        style: "expanded"
+      });
+      
+      return async (data) => {
+        return result.css;
+      };
+    }
+  });

  eleventyConfig.addWatchTarget("./src");
  eleventyConfig.addWatchTarget("./icons");
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -0,0 +1,55 @@
+name: Build
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Use Node.js 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 10.26.2
+
+      - name: Install system dependencies for canvas and rsvg-convert
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            build-essential \
+            libcairo2-dev \
+            libpango1.0-dev \
+            libjpeg-dev \
+            libgif-dev \
+            librsvg2-dev \
+            librsvg2-bin
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Build
+        env:
+          ICONS_LIMIT: 100
+        run: pnpm exec turbo build
+
--- a/.github/workflows/validate-pr.yml
+++ b/.github/workflows/validate-pr.yml
@ -41,6 +41,18 @@ jobs:
        with:
          version: 10.26.2

+      - name: Install system dependencies for canvas and rsvg-convert
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            build-essential \
+            libcairo2-dev \
+            libpango1.0-dev \
+            libjpeg-dev \
+            libgif-dev \
+            librsvg2-dev \
+            librsvg2-bin
+
      - name: Get pnpm store directory
        shell: bash
        run: |
--- a/package.json
+++ b/package.json
@ -53,11 +53,10 @@
    "generate-icons-comment": "node ./.build/generate-icons-comment.mjs"
  },
  "devDependencies": {
-    "@11ty/eleventy": "^2.0.1",
-    "@atomico/rollup-plugin-sizes": "^1.1.4",
-    "@release-it-plugins/workspaces": "^4.2.1",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@11ty/eleventy": "^3.1.2",
+    "@release-it-plugins/workspaces": "^5.0.3",
+    "@rollup/plugin-node-resolve": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
    "adm-zip": "^0.5.16",
    "cheerio": "^1.0.0",
    "csv-parser": "^3.0.0",
@ -68,30 +67,30 @@
    "glob": "10.3.16",
    "gray-matter": "^4.0.3",
    "html-minifier": "^4.0.0",
-    "jest-serializer-html": "^7.1.0",
-    "jsdom": "^24.0.0",
+    "jest-serializer-html": "catalog:",
+    "jsdom": "catalog:",
    "minimist": "1.2.8",
    "openai": "^4.73.1",
    "parse-svg-path": "^0.1.2",
    "prettier": "^3.2.5",
-    "release-it": "17.1.1",
-    "rollup": "^4.12.1",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-esbuild": "^6.1.1",
-    "rollup-plugin-filesize": "10.0.0",
-    "rollup-plugin-license": "^3.2.0",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-visualizer": "^5.12.0",
+    "release-it": "19.2.2",
+    "rollup": "catalog:",
+    "rollup-plugin-dts": "catalog:",
+    "rollup-plugin-esbuild": "catalog:",
+    "rollup-plugin-filesize": "catalog:",
+    "rollup-plugin-license": "catalog:",
+    "rollup-plugin-peer-deps-external": "catalog:",
+    "rollup-plugin-visualizer": "catalog:",
    "sass": "^1.71.1",
    "slash": "^5.1.0",
    "svg-outline-stroke": "1.3.1",
-    "svgo": "^3.2.0",
+    "svgo": "^4.0.0",
    "svgpath": "^2.6.0",
    "svgson": "^5.3.1",
-    "turbo": "^2.6.3",
-    "typescript": "^5.3.3",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16"
+    "turbo": "^2.7.2",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vitest": "catalog:"
  },
  "release-it": {
    "plugins": {
@ -114,6 +113,7 @@
      "release": true
    }
  },
+  "packageManager": "pnpm@10.26.2",
  "pnpm": {
    "ignoredBuiltDependencies": [
      "@parcel/watcher",
@ -121,6 +121,9 @@
      "sharp",
      "svelte-preprocess",
      "ttf2woff2"
+    ],
+    "onlyBuiltDependencies": [
+      "canvas"
    ]
  }
 }
--- a/packages/icons-eps/package.json
+++ b/packages/icons-eps/package.json
@ -38,5 +38,8 @@
    "web",
    "eps",
    "vector"
-  ]
-}
+  ],
+  "devDependencies": {},
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/packages/icons-pdf/package.json
+++ b/packages/icons-pdf/package.json
@ -41,5 +41,8 @@
    "react",
    "front-end",
    "web"
-  ]
-}
+  ],
+  "devDependencies": {},
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/packages/icons-png/package.json
+++ b/packages/icons-png/package.json
@ -41,5 +41,8 @@
    "react",
    "front-end",
    "web"
-  ]
-}
+  ],
+  "devDependencies": {},
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/packages/icons-preact/package.json
+++ b/packages/icons-preact/package.json
@ -45,5 +45,6 @@
    "@preact/preset-vite": "^2.10.2",
    "@testing-library/preact": "^3.2.3",
    "preact": "^10.19.6"
-  }
-}
+  },
+  "optionalDependencies": {}
+}
--- a/packages/icons-react-native/package.json
+++ b/packages/icons-react-native/package.json
@ -73,5 +73,6 @@
  },
  "peerDependencies": {
    "react": ">= 16.5.1"
-  }
-}
+  },
+  "optionalDependencies": {}
+}
--- a/packages/icons-react/package.json
+++ b/packages/icons-react/package.json
@ -48,5 +48,6 @@
  },
  "peerDependencies": {
    "react": ">= 16"
-  }
-}
+  },
+  "optionalDependencies": {}
+}
--- a/packages/icons-solidjs/package.json
+++ b/packages/icons-solidjs/package.json
@ -55,9 +55,10 @@
    "rollup-preset-solid": "^2.0.1",
    "vite-plugin-solid": "^2.10.1",
    "solid-js": "^1.8.15",
-    "rollup": "^4.12.0"
+    "rollup": "catalog:"
  },
  "peerDependencies": {
    "solid-js": "^1.4.7"
-  }
-}
+  },
+  "optionalDependencies": {}
+}
--- a/packages/icons-sprite/package.json
+++ b/packages/icons-sprite/package.json
@ -39,5 +39,8 @@
    "react",
    "front-end",
    "web"
-  ]
-}
+  ],
+  "devDependencies": {},
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/packages/icons-svelte-runes/package.json
+++ b/packages/icons-svelte-runes/package.json
@ -65,19 +65,15 @@
  },
  "devDependencies": {
    "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
    "@testing-library/svelte": "^5.2.9",
    "@tsconfig/svelte": "^5.0.4",
-    "jest-serializer-html": "^7.1.0",
-    "jsdom": "^25.0.1",
    "svelte": "^5.0.0",
    "svelte-check": "^4.3.4",
-    "typescript": "^5.7.3",
-    "vite": "^7.2.7",
-    "vitest": "^3.0.8"
+    "vite": "^6.0.0"
  },
  "peerDependencies": {
    "svelte": "^5.0.0"
-  }
-}
+  },
+  "optionalDependencies": {}
+}
--- a/packages/icons-svelte/package.json
+++ b/packages/icons-svelte/package.json
@ -54,14 +54,16 @@
  },
  "devDependencies": {
    "@sveltejs/package": "^2.2.7",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
    "@testing-library/svelte": "^4.2.1",
    "@tsconfig/svelte": "^5.0.2",
    "svelte": "^4.2.12",
    "svelte-check": "^3.6.5",
-    "svelte-preprocess": "^5.1.3"
+    "svelte-preprocess": "^5.1.3",
+    "vite": "^5.4.0"
  },
  "peerDependencies": {
    "svelte": ">=3 <6 || >=5.0.0-next.0"
-  }
-}
+  },
+  "optionalDependencies": {}
+}
--- a/packages/icons-vue/package.json
+++ b/packages/icons-vue/package.json
@ -45,5 +45,6 @@
    "@vue/compiler-sfc": "^3.4.20",
    "@vue/test-utils": "2.4.4",
    "vue": "^3.4.20"
-  }
-}
+  },
+  "optionalDependencies": {}
+}
--- a/packages/icons-webfont/.build/utilities.mjs
+++ b/packages/icons-webfont/.build/utilities.mjs
@ -5,6 +5,11 @@ import { globSync } from 'glob';
 import SVGPathCommander, { parsePathString, pathToString } from 'svg-path-commander';
 import { blankSquare, getAliases, getPackageJson } from '../../../.build/helpers.mjs';
 import spo from 'svg-path-outline';
+// Import canvas before paper-jsdom to ensure it's available for jsdom
+// Use require for canvas to ensure it's loaded before jsdom initializes
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+require('canvas');
 import paper from "paper-jsdom";
 import { createCanvas } from '@napi-rs/canvas';
 import crypto from 'crypto';
--- a/packages/icons-webfont/package.json
+++ b/packages/icons-webfont/package.json
@ -48,7 +48,8 @@
    "svgtofont": "^6.5.0"
  },
  "devDependencies": {
-    "@napi-rs/canvas": "^0.1.86",
+    "@napi-rs/canvas": "^0.1.88",
+    "canvas": "^3.2.0",
    "eta": "^3.4.0",
    "glob": "^13.0.0",
    "paper-jsdom": "^0.12.18",
@ -57,5 +58,7 @@
    "svgicons2svgfont": "^15.0.1",
    "ttf2woff": "^3.0.0",
    "wawoff2": "^2.0.1"
-  }
+  },
+  "peerDependencies": {},
+  "optionalDependencies": {}
 }
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@ -47,5 +47,9 @@
    "react",
    "front-end",
    "web"
-  ]
-}
+  ],
+  "dependencies": {},
+  "devDependencies": {},
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -1,3 +1,22 @@
 packages:
-  - 'packages/*'
-  - 'test/*'
+  - "packages/*"
+  - "test/*"
+catalog:
+  typescript: 5.9.3
+  vite: ^7.3.0
+  vitest: ^4.0.16
+  jest-serializer-html: ^7.1.0
+  jsdom: 27.4.0
+  "@testing-library/jest-dom": 6.9.1
+  rollup: 4.54.0
+  "@rollup/plugin-node-resolve": 16.0.3
+  rollup-plugin-dts: 6.3.0
+  rollup-plugin-esbuild: 6.2.1
+  rollup-plugin-filesize: 10.0.0
+  rollup-plugin-license: 3.6.0
+  rollup-plugin-peer-deps-external: 2.2.4
+  rollup-plugin-visualizer: ^6.0.5
+  "@types/react": 18.3.27
+  "@testing-library/react": 16.3.1
+  react: 18.3.1
+  "@vitejs/plugin-react": 5.1.2
--- a/src/_includes/default.liquid
+++ b/src/_includes/default.liquid
@ -0,0 +1,32 @@
+---
+---
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport"
+	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+	<link rel="stylesheet" href="{{ site.baseurl }}/style.css">
+	<title>{% if not production %}DEV - {% endif %}Tabler Icons</title>
+
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
+	<style>
+		body {
+			display: none;
+		}
+	</style>
+</head>
+<body>
+
+{{ content }}
+
+<script>
+	$(document).ready(function(){
+		document.body.style.display = "block";
+	});
+</script>
+
+</body>
+</html>
--- a/test/test-preact/package.json
+++ b/test/test-preact/package.json
@ -15,5 +15,7 @@
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.10.2"
-  }
-}
+  },
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/test/test-react-native/package.json
+++ b/test/test-react-native/package.json
@ -18,5 +18,7 @@
    "@types/react": "^18.2.60",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^5.1.2"
-  }
-}
+  },
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/test/test-react/package.json
+++ b/test/test-react/package.json
@ -18,5 +18,7 @@
    "@types/react": "^18.2.60",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^5.1.2"
-  }
-}
+  },
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/test/test-svelte/package.json
+++ b/test/test-svelte/package.json
@ -14,10 +14,13 @@
    "@tabler/icons-svelte": "workspace:*"
  },
  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
    "@tsconfig/svelte": "^5.0.2",
    "svelte": "^4.2.12",
    "svelte-check": "^3.6.5",
-    "tslib": "^2.6.2"
-  }
-}
+    "tslib": "^2.6.2",
+    "vite": "^5.4.0"
+  },
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/test/test-vue/package.json
+++ b/test/test-vue/package.json
@ -16,5 +16,7 @@
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.3",
    "vue-tsc": "^3.1.8"
-  }
-}
+  },
+  "peerDependencies": {},
+  "optionalDependencies": {}
+}
--- a/turbo.json
+++ b/turbo.json
@ -1,5 +1,6 @@
 {
  "$schema": "https://turbo.build/schema.json",
+  "globalEnv": ["ICONS_LIMIT"],
  "tasks": {
    "build": {
      "outputs": ["dist/**", "src/icons/**", "icons/**", "icons.json", "tabler-nodes-*.json", "categories/**", "docs/**"],