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>

.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:

.github/workflows/lint-pr-title.yml

@@ -1,4 +1,4 @@
-name: Linting PR
+name: Linting PR title
 
 on:
   pull_request:

icons/ambulance.svg

@@ -11,8 +11,7 @@
 >
   <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
+  <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" />
-    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" />

icons/gamepad-directional.svg

@@ -9,12 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path
+  <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" />
-    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
+  <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" />
-    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="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="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>

icons/lens-convex.svg

@@ -9,6 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path
+  <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" />
-    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>

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)}`,

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",

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;

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',
+      },
+    },
   ],
 };