feat(ci): added custom prettier plugin for icon SVG files (#4576)

* feat(ci): added custom prettier plugin for icon SVG files * feat(ci): added custom prettier plugin for icon SVG files * feat(ci): replace prettier plugin implementation with one based on svgo * fix(ci): fix linting issues in prettier plugin * Allow fill in path to fix podcast icon * Format code --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2026-08-29 08:48:22 +02:00 · 2026-07-24 14:23:56 +02:00
parent 357df0d660
commit 5d36179bf4
38 changed files with 124 additions and 48 deletions
--- a/.github/workflows/lint-code.yml
+++ b/.github/workflows/lint-code.yml
@@ -1,9 +1,7 @@
-name: Linting PR
+name: Linting PR code

 on:
  pull_request:
-    paths-ignore:
-      - icons/*.svg

 jobs:
  lint-code:
--- a/.github/workflows/lint-pr-title.yml
+++ b/.github/workflows/lint-pr-title.yml
@@ -1,4 +1,4 @@
-name: Linting PR
+name: Linting PR title

 on:
  pull_request:
--- a/icons/a-large-small.svg
+++ b/icons/a-large-small.svg
@@ -13,4 +13,4 @@
  <path d="M15.697 14h5.606" />
  <path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
  <path d="M3.304 13h6.392" />
-</svg>
+</svg>
--- a/icons/ambulance.svg
+++ b/icons/ambulance.svg
@@ -11,10 +11,9 @@
 >
  <path d="M10 10H6" />
  <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" />
-  <path
-    d="M19 18h2a1 1 0 0 0 1-1v-3.28a1 1 0 0 0-.684-.948l-1.923-.641a1 1 0 0 1-.578-.502l-1.539-3.076A1 1 0 0 0 16.382 8H14" />
+  <path d="M19 18h2a1 1 0 0 0 1-1v-3.28a1 1 0 0 0-.684-.948l-1.923-.641a1 1 0 0 1-.578-.502l-1.539-3.076A1 1 0 0 0 16.382 8H14" />
  <path d="M8 8v4" />
  <path d="M9 18h6" />
  <circle cx="17" cy="18" r="2" />
  <circle cx="7" cy="18" r="2" />
-</svg>
+</svg>
--- a/icons/bone-fracture.svg
+++ b/icons/bone-fracture.svg
@@ -15,4 +15,4 @@
  <path d="m4 8 2 1" />
  <path d="m8 4 1 2" />
  <path d="M9.698 14.19a.15.15 0 0 0 .112.112l2.074.489a.15.15 0 0 1 .072.252L10 17c-.7.7 0 1.69 0 2.5a1 1 0 0 1-5 0 .495.495 0 0 0-.5-.5 1 1 0 0 1 0-5c.81 0 1.8.7 2.5 0l1.956-1.957a.15.15 0 0 1 .252.072z" />
-</svg>
+</svg>
--- a/icons/bot-off.svg
+++ b/icons/bot-off.svg
@@ -16,4 +16,4 @@
  <path d="M8 8H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 1.414-.586" />
  <path d="M9 13v2" />
  <path d="M9.67 4H12v2.33" />
-</svg>
+</svg>
--- a/icons/captions.svg
+++ b/icons/captions.svg
@@ -11,4 +11,4 @@
 >
  <rect width="18" height="14" x="3" y="5" rx="2" ry="2" />
  <path d="M7 15h4M15 15h2M7 11h2M13 11h4" />
-</svg>
+</svg>
--- a/icons/circle-fading-plus.svg
+++ b/icons/circle-fading-plus.svg
@@ -16,4 +16,4 @@
  <path d="M2.83 16a10 10 0 0 0 2.43 3.4" />
  <path d="M4.636 5.235a10 10 0 0 1 .891-.857" />
  <path d="M8.644 21.42a10 10 0 0 0 7.631-.38" />
-</svg>
+</svg>
--- a/icons/diamond-minus.svg
+++ b/icons/diamond-minus.svg
@@ -11,4 +11,4 @@
 >
  <path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0z" />
  <path d="M8 12h8" />
-</svg>
+</svg>
--- a/icons/diamond-plus.svg
+++ b/icons/diamond-plus.svg
@@ -12,4 +12,4 @@
  <path d="M12 8v8" />
  <path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0z" />
  <path d="M8 12h8" />
-</svg>
+</svg>
--- a/icons/flag-triangle-left.svg
+++ b/icons/flag-triangle-left.svg
@@ -10,4 +10,4 @@
  stroke-linejoin="round"
 >
  <path d="M18 22V2.8a.8.8 0 0 0-1.17-.71L5.45 7.78a.8.8 0 0 0 0 1.44L18 15.5" />
-</svg>
+</svg>
--- a/icons/gamepad-directional.svg
+++ b/icons/gamepad-directional.svg
@@ -9,12 +9,8 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path
-    d="M11.146 15.854a1.207 1.207 0 0 1 1.708 0l1.56 1.56A2 2 0 0 1 15 18.828V21a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2.172a2 2 0 0 1 .586-1.414z" />
-  <path
-    d="M18.828 15a2 2 0 0 1-1.414-.586l-1.56-1.56a1.207 1.207 0 0 1 0-1.708l1.56-1.56A2 2 0 0 1 18.828 9H21a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z" />
-  <path
-    d="M6.586 14.414A2 2 0 0 1 5.172 15H3a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2.172a2 2 0 0 1 1.414.586l1.56 1.56a1.207 1.207 0 0 1 0 1.708z" />
-  <path
-    d="M9 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2.172a2 2 0 0 1-.586 1.414l-1.56 1.56a1.207 1.207 0 0 1-1.708 0l-1.56-1.56A2 2 0 0 1 9 5.172z" />
+  <path d="M11.146 15.854a1.207 1.207 0 0 1 1.708 0l1.56 1.56A2 2 0 0 1 15 18.828V21a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2.172a2 2 0 0 1 .586-1.414z" />
+  <path d="M18.828 15a2 2 0 0 1-1.414-.586l-1.56-1.56a1.207 1.207 0 0 1 0-1.708l1.56-1.56A2 2 0 0 1 18.828 9H21a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z" />
+  <path d="M6.586 14.414A2 2 0 0 1 5.172 15H3a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2.172a2 2 0 0 1 1.414.586l1.56 1.56a1.207 1.207 0 0 1 0 1.708z" />
+  <path d="M9 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2.172a2 2 0 0 1-.586 1.414l-1.56 1.56a1.207 1.207 0 0 1-1.708 0l-1.56-1.56A2 2 0 0 1 9 5.172z" />
 </svg>
--- a/icons/git-merge-conflict.svg
+++ b/icons/git-merge-conflict.svg
@@ -14,4 +14,4 @@
  <path d="M9 3 3 9" />
  <path d="M9 9 3 3" />
  <circle cx="18" cy="18" r="3" />
-</svg>
+</svg>
--- a/icons/id-card-lanyard.svg
+++ b/icons/id-card-lanyard.svg
@@ -14,4 +14,4 @@
  <path d="M16.899 22A5 5 0 0 0 7.1 22" />
  <path d="m9 2 3 6" />
  <circle cx="12" cy="15" r="3" />
-</svg>
+</svg>
--- a/icons/keyboard-off.svg
+++ b/icons/keyboard-off.svg
@@ -19,4 +19,4 @@
  <path d="M20 20H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2" />
  <path d="M6 8h.01" />
  <path d="M8 12h.01" />
-</svg>
+</svg>
--- a/icons/layers-plus.svg
+++ b/icons/layers-plus.svg
@@ -14,4 +14,4 @@
  <path d="M19 14v6" />
  <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 .825.178" />
  <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l2.116-.962" />
-</svg>
+</svg>
--- a/icons/lens-convex.svg
+++ b/icons/lens-convex.svg
@@ -9,6 +9,5 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path
-    d="M13.433 2a1 1 0 0 1 .824.448 18 18 0 0 1 0 19.104 1 1 0 0 1-.824.448h-2.866a1 1 0 0 1-.824-.448 18 18 0 0 1 0-19.104A1 1 0 0 1 10.567 2z" />
+  <path d="M13.433 2a1 1 0 0 1 .824.448 18 18 0 0 1 0 19.104 1 1 0 0 1-.824.448h-2.866a1 1 0 0 1-.824-.448 18 18 0 0 1 0-19.104A1 1 0 0 1 10.567 2z" />
 </svg>
--- a/icons/line-squiggle.svg
+++ b/icons/line-squiggle.svg
@@ -10,4 +10,4 @@
  stroke-linejoin="round"
 >
  <path d="M7 3.5c5-2 7 2.5 3 4C1.5 10 2 15 5 16c5 2 9-10 14-7s.5 13.5-4 12c-5-2.5.5-11 6-2" />
-</svg>
+</svg>
--- a/icons/mirror-rectangular.svg
+++ b/icons/mirror-rectangular.svg
@@ -12,4 +12,4 @@
  <path d="M11 6 8 9" />
  <path d="m16 7-8 8" />
  <rect x="4" y="2" width="16" height="20" rx="2" />
-</svg>
+</svg>
--- a/icons/mirror-round.svg
+++ b/icons/mirror-round.svg
@@ -14,4 +14,4 @@
  <path d="M15 7.5 9.5 13" />
  <path d="M7 22h10" />
  <circle cx="12" cy="10" r="8" />
-</svg>
+</svg>
--- a/icons/pilcrow-right.svg
+++ b/icons/pilcrow-right.svg
@@ -14,4 +14,4 @@
  <path d="M14 3v11" />
  <path d="m18 14 4 4H2" />
  <path d="m22 18-4 4" />
-</svg>
+</svg>
--- a/icons/scooter.svg
+++ b/icons/scooter.svg
@@ -13,4 +13,4 @@
  <path d="M6.95 17h5.142c.523 0 .95-.406 1.063-.916a6.5 6.5 0 0 1 5.345-5.009" />
  <circle cx="19.5" cy="17.5" r="2.5" />
  <circle cx="4.5" cy="17.5" r="2.5" />
-</svg>
+</svg>
--- a/icons/search-alert.svg
+++ b/icons/search-alert.svg
@@ -13,4 +13,4 @@
  <path d="m21 21-4.3-4.3" />
  <path d="M11 7v4" />
  <path d="M11 15h.01" />
-</svg>
+</svg>
--- a/icons/spline-pointer.svg
+++ b/icons/spline-pointer.svg
@@ -13,4 +13,4 @@
  <path d="M5 17A12 12 0 0 1 17 5" />
  <circle cx="19" cy="5" r="2" />
  <circle cx="5" cy="19" r="2" />
-</svg>
+</svg>
--- a/icons/square-arrow-right-enter.svg
+++ b/icons/square-arrow-right-enter.svg
@@ -12,4 +12,4 @@
  <path d="m10 16 4-4-4-4" />
  <path d="M3 12h11" />
  <path d="M3 8V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3" />
-</svg>
+</svg>
--- a/icons/square-arrow-right-exit.svg
+++ b/icons/square-arrow-right-exit.svg
@@ -12,4 +12,4 @@
  <path d="M10 12h11" />
  <path d="m17 16 4-4-4-4" />
  <path d="M21 6.344V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.344" />
-</svg>
+</svg>
--- a/icons/square-off.svg
+++ b/icons/square-off.svg
@@ -12,4 +12,4 @@
  <path d="M20.4 20.4a2 2 0 01-1.4.6H5a2 2 0 01-2-2V5a2 2 0 01.59-1.41" />
  <path d="M21 15.3V5a2 2 0 00-2-2H8.7" />
  <path d="M22 22 2 2" />
-</svg>
+</svg>
--- a/icons/squares-exclude.svg
+++ b/icons/squares-exclude.svg
@@ -11,4 +11,4 @@
 >
  <path d="M16 12v2a2 2 0 0 1-2 2H9a1 1 0 0 0-1 1v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2h0" />
  <path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1h-5a2 2 0 0 0-2 2v2" />
-</svg>
+</svg>
--- a/icons/squares-intersect.svg
+++ b/icons/squares-intersect.svg
@@ -20,4 +20,4 @@
  <path d="M4 16a2 2 0 0 1-2-2" />
  <path d="M8 10a2 2 0 0 1 2-2h5a1 1 0 0 1 1 1v5a2 2 0 0 1-2 2H9a1 1 0 0 1-1-1z" />
  <path d="M8 2h2" />
-</svg>
+</svg>
--- a/icons/squares-subtract.svg
+++ b/icons/squares-subtract.svg
@@ -15,4 +15,4 @@
  <path d="M20 8a2 2 0 0 1 2 2" />
  <path d="M22 14v2" />
  <path d="M22 20a2 2 0 0 1-2 2" />
-</svg>
+</svg>
--- a/icons/squares-unite.svg
+++ b/icons/squares-unite.svg
@@ -10,4 +10,4 @@
  stroke-linejoin="round"
 >
  <path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a1 1 0 0 0 1 1h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-3a1 1 0 0 0-1-1z" />
-</svg>
+</svg>
--- a/icons/toilet.svg
+++ b/icons/toilet.svg
@@ -11,4 +11,4 @@
 >
  <path d="M7 12h13a1 1 0 0 1 1 1 5 5 0 0 1-5 5h-.598a.5.5 0 0 0-.424.765l1.544 2.47a.5.5 0 0 1-.424.765H5.402a.5.5 0 0 1-.424-.765L7 18" />
  <path d="M8 18a5 5 0 0 1-5-5V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8" />
-</svg>
+</svg>
--- a/icons/truck.svg
+++ b/icons/truck.svg
@@ -14,4 +14,4 @@
  <path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14" />
  <circle cx="17" cy="18" r="2" />
  <circle cx="7" cy="18" r="2" />
-</svg>
+</svg>
--- a/icons/van.svg
+++ b/icons/van.svg
@@ -14,4 +14,4 @@
  <path d="M9 18h5" />
  <circle cx="16" cy="18" r="2" />
  <circle cx="7" cy="18" r="2" />
-</svg>
+</svg>
--- a/lint-staged.config.mjs
+++ b/lint-staged.config.mjs
@@ -6,9 +6,10 @@ const filenamesToAjvOption = (filenames) => filenames.map((filename) => `-d ${fi

 /** @satisfies {import('lint-staged').Config} */
 const config = {
-  'icons/*.svg': [
+  'icons/*.svg': (filenames) => [
    'node ./scripts/optimizeStagedSvgs.mts',
    'node ./scripts/generateNextJSAliases.mts',
+    `prettier --write ${filenames.join(' ')}`,
  ],
  'icons/*.json': (filenames) => [
    `ajv --spec=draft2020 -s icon.schema.json ${filenamesToAjvOption(filenames)}`,
--- a/package.json
+++ b/package.json
@@ -31,10 +31,12 @@
    "lint:es": "eslint .",
    "lint:format": "prettier \"**/*.{js,mjs,ts,jsx,tsx,html,css,scss,json,yml,yaml}\" --check",
    "lint:format-fix": "prettier \"**/*.{js,mjs,ts,jsx,tsx,html,css,scss,json,yml,yaml}\" --write",
+    "lint:icons": "prettier \"icons/*.svg\" --check",
+    "lint:icons-fix": "prettier \"icons/*.svg\" --write",
    "lint:json:icons": "ajv --spec=draft2020 -s icon.schema.json -d 'icons/*.json' > /dev/null",
    "lint:json:categories": "ajv --spec=draft2020 -s category.schema.json -d 'categories/*.json' > /dev/null",
    "lint:json": "pnpm run lint:json:icons && pnpm run lint:json:categories",
-    "lint": "pnpm lint:es && pnpm lint:format && pnpm lint:json",
+    "lint": "pnpm lint:es && pnpm lint:format && pnpm lint:json && pnpm lint:icons",
    "format": "prettier \"**/*.{js,mjs,ts,jsx,tsx,html,css,scss,json,yml,yaml}\" --write",
    "prepare": "husky install",
    "gi": "node ./scripts/generate/generateIcons.mts",
--- a/prettier-plugin-lucide-svg.mjs
+++ b/prettier-plugin-lucide-svg.mjs
@@ -0,0 +1,74 @@
+import { optimize } from 'svgo';
+
+const plugin = {
+  languages: [
+    {
+      name: 'Lucide SVG',
+      parsers: ['lucide-svg'],
+      extensions: ['.svg'],
+      vscodeLanguageIds: ['svg'],
+    },
+  ],
+  parsers: {
+    'lucide-svg': {
+      astFormat: 'lucide-svg',
+      parse: (path) => path,
+      locStart: () => 0,
+      locEnd: () => 0,
+    },
+  },
+  printers: {
+    'lucide-svg': {
+      print(path) {
+        return optimize(path.node, {
+          multipass: true,
+          floatPrecision: 3,
+          plugins: [
+            'removeDoctype',
+            'removeComments',
+            'collapseGroups',
+            'removeEmptyContainers',
+            {
+              name: 'removeAttrs',
+              params: {
+                attrs: [
+                  'svg:^(?!(xmlns|width|height|fill|stroke|stroke-linecap|stroke-linejoin|stroke-width)$).+',
+                  'path:^(?!(d|fill)$).+',
+                  'line:^(?!(x1|x2|y1|y2)$).+',
+                  'polygon:^(?!points$).+',
+                  'polyline:^(?!points$).+',
+                  'circle:^(?!(cx|cy|r|fill)$).+',
+                  'ellipse:^(?!(cx|cy|rx|ry)$).+',
+                  'rect:^(?!(x|y|width|height|rx|ry)$).+',
+                ],
+              },
+            },
+          ],
+          js2svg: {
+            indent: 2,
+            pretty: true,
+            useShortTags: true,
+            finalNewline: true,
+          },
+        })
+          .data.replace(
+            /<svg[^>]+>/,
+            `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>`,
+          )
+          .replace(/"\/>/g, `" />`);
+      },
+    },
+  },
+};
+
+export default plugin;
--- a/prettier.config.mjs
+++ b/prettier.config.mjs
@@ -1,5 +1,6 @@
 /** @satisfies {import('prettier').Config} */
 const config = {
+  plugins: ['./prettier-plugin-lucide-svg.mjs'],
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
@@ -11,6 +12,12 @@ const config = {
        printWidth: 0,
      },
    },
+    {
+      files: ['icons/*.svg'],
+      options: {
+        parser: 'lucide-svg',
+      },
+    },
  ],
 };