Removed custom icon script in favor of a vite plugin

Author: alem tuzlak

app/library/icon/icons/types.ts

@@ -1,5 +1,8 @@
-// This file is generated by npm run build:icons
+// This file is generated by icon spritesheet generator
 
-export type IconName = "ShoppingCart";
+export type IconName =
+  | "ShoppingCart"
 
-export const iconNames = ["ShoppingCart"] as const;
+export const iconNames = [
+  "ShoppingCart",
+] as const

package-lock.json

@@ -7,8 +7,8 @@
   "scripts": {
     "execute": "node --no-warnings --experimental-specifier-resolution=node --loader ./scripts/loader.js",
     "script": "npm run execute scripts/setup.ts",
-    "icons": "npm run script scripts/icons.ts",
     "cleanup": "npm run script scripts/cleanup.ts",
+    "postinstall": "npm run cleanup",
     "build": "remix vite:build",
     "dev": "remix vite:dev",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
@@ -73,6 +73,7 @@
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.4.3",
     "vite": "^5.2.8",
+    "vite-plugin-icons-spritesheet": "^1.2.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.4.0"
   },

package.json

@@ -26,6 +26,8 @@ const removeTheCleanupFromPackageJsonAndScripts = async () => {
   );
 
   delete packageJson.scripts.cleanup;
+  delete packageJson.scripts.postinstall;
+
   await fs.writeFile(
     "package.json",
     JSON.stringify(packageJson, null, 2),

scripts/cleanup.ts

@@ -3,6 +3,7 @@ import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { remixDevTools } from "remix-development-tools";
 import { routes } from "./remix/config";
+import { iconsSpritesheet } from "vite-plugin-icons-spritesheet";
 
 export default defineConfig({
   plugins: [
@@ -11,6 +12,12 @@ export default defineConfig({
       unstable_console: true,
     }),
     remix({ routes }),
+    iconsSpritesheet({
+      inputDir: "./resources/icons",
+      outputDir: "./app/library/icon/icons",
+      withTypes: true,
+      fileName: "icon.svg",
+    }),
     tsconfigPaths(),
   ],
   ssr: {