feat: Add vite-plugin-icons-spritesheet instead of the custom build script (#984)

* feat: Add vite-plugin-icons-spritesheet instead of the custom build script

* fix for workflow

* chore: fix workflow

Author: AlemTuzlak

.github/workflows/deploy.yml

@@ -31,10 +31,7 @@ jobs:
         uses: bahmutov/npm-install@v1
 
       - name: 🏄 Copy test env vars
-        run: cp .env.example .env
-
-      - name: 🖼 Build icons
-        run: npm run build:icons
+        run: cp .env.example .env 
 
       - name: 🛠 Setup Database
         run: npx prisma migrate deploy && npx prisma generate --sql
@@ -57,11 +54,11 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
-      - name: 🏄 Copy test env vars
-        run: cp .env.example .env
+      - name: 🏗 Build
+        run: npm run build
 
-      - name: 🖼 Build icons
-        run: npm run build:icons
+      - name: 🏄 Copy test env vars
+        run: cp .env.example .env 
 
       - name: 🛠 Setup Database
         run: npx prisma migrate deploy && npx prisma generate --sql
@@ -85,10 +82,7 @@ jobs:
         uses: bahmutov/npm-install@v1
 
       - name: 🏄 Copy test env vars
-        run: cp .env.example .env
-
-      - name: 🖼 Build icons
-        run: npm run build:icons
+        run: cp .env.example .env 
 
       - name: 🛠 Setup Database
         run: npx prisma migrate deploy && npx prisma generate --sql

other/build-icons.ts

@@ -11,10 +11,8 @@
   },
   "scripts": {
     "build": "run-s build:*",
-    "build:icons": "tsx ./other/build-icons.ts",
     "build:remix": "react-router build",
     "build:server": "tsx ./other/build-server.ts",
-    "predev": "npm run build:icons --silent",
     "dev": "cross-env NODE_ENV=development MOCKS=true node ./server/dev-server.js",
     "dev:no-mocks": "cross-env NODE_ENV=development node ./server/dev-server.js",
     "format": "prettier --write .",
@@ -147,7 +145,6 @@
     "fs-extra": "^11.3.0",
     "jsdom": "^25.0.1",
     "msw": "^2.7.3",
-    "node-html-parser": "^7.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.5.3",
     "prettier-plugin-sql": "^0.18.1",
@@ -157,6 +154,7 @@
     "tw-animate-css": "^1.2.4",
     "typescript": "^5.8.2",
     "vite": "^6.2.2",
+    "vite-plugin-icons-spritesheet": "^3.0.1",
     "vitest": "^3.0.9"
   },
   "engines": {
@@ -166,4 +164,4 @@
     "seed": "tsx prisma/seed.ts"
   },
   "prettier": "@epic-web/config/prettier"
-}
+}

package-lock.json

@@ -8,10 +8,7 @@
 		"paths": {
 			"#app/*": ["./app/*"],
 			"#tests/*": ["./tests/*"],
-			"@/icon-name": [
-				"./app/components/ui/icons/name.d.ts",
-				"./types/icon-name.d.ts"
-			]
+			"@/icon-name": ["./app/components/ui/icons/types.ts", "./types/types.ts"]
 		}
 	}
 }

package.json

@@ -1,11 +1,12 @@
 import { reactRouter } from '@react-router/dev/vite'
 import {
-	sentryReactRouter,
 	type SentryReactRouterBuildOptions,
+	sentryReactRouter,
 } from '@sentry/react-router'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
 import { envOnlyMacros } from 'vite-env-only'
+import { iconsSpritesheet } from 'vite-plugin-icons-spritesheet'
 
 const MODE = process.env.NODE_ENV
 
@@ -20,7 +21,6 @@ export default defineConfig((config) => ({
 
 		assetsInlineLimit: (source: string) => {
 			if (
-				source.endsWith('sprite.svg') ||
 				source.endsWith('favicon.svg') ||
 				source.endsWith('apple-touch-icon.png')
 			) {
@@ -39,6 +39,13 @@ export default defineConfig((config) => ({
 	plugins: [
 		envOnlyMacros(),
 		tailwindcss(),
+		iconsSpritesheet({
+			inputDir: './other/svg-icons',
+			outputDir: './app/components/ui/icons',
+			fileName: 'sprite.svg',
+			withTypes: true,
+			iconNameTransformer: (name) => name,
+		}),
 		// it would be really nice to have this enabled in tests, but we'll have to
 		// wait until https://github.com/remix-run/remix/issues/9871 is fixed
 		MODE === 'test' ? null : reactRouter(),