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/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>

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
+  <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" />
   <circle cx="7" cy="18" r="2" />
-</svg>
+</svg>

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>

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>

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>

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>

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>

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>

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>

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/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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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