append hash to sprite file name base on its content

.gitignore

@@ -15,6 +15,7 @@
 /public/assets/envs.js
 /public/assets/configs
 /public/icons/sprite.svg
+/public/icons/sprite.*.svg
 /public/icons/README.md
 /analyze
 

Dockerfile

@@ -56,9 +56,11 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-# Generate .env.registry with ENVs list and save build args into .env file
-COPY --chmod=755 ./deploy/scripts/collect_envs.sh ./
-RUN ./collect_envs.sh ./docs/ENVS.md
+# Build SVG sprite and generate .env.registry with ENVs list and save build args into .env file
+RUN set -a && \
+    source ./deploy/scripts/build_sprite.sh && \
+    ./deploy/scripts/collect_envs.sh ./docs/ENVS.md && \
+    set +a
 
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
@@ -66,7 +68,6 @@ RUN ./collect_envs.sh ./docs/ENVS.md
 # ENV NEXT_TELEMETRY_DISABLED 1
 
 # Build app for production
-RUN yarn svg:build-sprite
 RUN yarn build
 
 

configs/app/app.ts

@@ -10,6 +10,7 @@ const baseUrl = [
   appPort && ':' + appPort,
 ].filter(Boolean).join('');
 const isDev = getEnvValue('NEXT_PUBLIC_APP_ENV') === 'development';
+const spriteHash = getEnvValue('NEXT_PUBLIC_ICON_SPRITE_HASH');
 
 const app = Object.freeze({
   isDev,
@@ -18,6 +19,7 @@ const app = Object.freeze({
   port: appPort,
   baseUrl,
   useProxy: getEnvValue('NEXT_PUBLIC_USE_NEXT_JS_PROXY') === 'true',
+  spriteHash,
 });
 
 export default app;

deploy/scripts/build_sprite.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+yarn icons build -i ./icons -o ./public/icons --optimize
+
+# Skip hash creation and renaming for playwright environment
+if [ "$NEXT_PUBLIC_APP_ENV" != "pw" ]; then
+    # Generate hash from the sprite file
+    HASH=$(md5sum ./public/icons/sprite.svg | cut -d' ' -f1 | head -c 8)
+
+    # Remove old sprite files
+    rm -f ./public/icons/sprite.*.svg
+
+    # Rename the new sprite file
+    mv ./public/icons/sprite.svg "./public/icons/sprite.${HASH}.svg"
+
+    export NEXT_PUBLIC_ICON_SPRITE_HASH=${HASH}
+
+    echo "SVG sprite created: sprite.${HASH}.svg"
+else
+    echo "SVG sprite created: sprite.svg (hash skipped for playwright environment)"
+fi

docs/BUILD-TIME_ENVS.md

@@ -7,3 +7,4 @@ These variables are passed to the app during the image build process. They canno
 | NEXT_PUBLIC_GIT_COMMIT_SHA | `string` | SHA of the latest commit in the branch from which image is built | false | `29d0613e` |
 | NEXT_PUBLIC_GIT_TAG | `string` | Git tag of the latest commit in the branch from which image is built | true | `v1.0.0` |
 | NEXT_OPEN_TELEMETRY_ENABLED | `boolean` | Enables OpenTelemetry SDK | true | `true` |
+| NEXT_PUBLIC_ICON_SPRITE_HASH | `string` | Hash post-fix of the SVG sprite file (generated automatically during the sprite build) | `08be4b10` | `true` |

package.json

@@ -23,7 +23,7 @@
     "lint:envs-validator:test": "cd ./deploy/tools/envs-validator && ./test.sh",
     "prepare": "husky install",
     "svg:format": "svgo -r ./icons",
-    "svg:build-sprite": "icons build -i ./icons -o ./public/icons --optimize",
+    "svg:build-sprite": "./deploy/scripts/build_sprite.sh",
     "test:pw": "./tools/scripts/pw.sh",
     "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw",
     "test:pw:docker": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.49.0-noble ./tools/scripts/pw.docker.sh",

tools/scripts/dev.preset.sh

@@ -19,13 +19,14 @@ dotenv \
   -e $config_file \
   -- bash -c './deploy/scripts/download_assets.sh ./public/assets/configs'
 
-yarn svg:build-sprite
+source ./deploy/scripts/build_sprite.sh
 echo ""
 
 # generate envs.js file and run the app
 dotenv \
   -v NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD) \
   -v NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \
+  -v NEXT_PUBLIC_ICON_SPRITE_HASH="${NEXT_PUBLIC_ICON_SPRITE_HASH}" \
   -e $config_file \
   -e $secrets_file \
   -- bash -c './deploy/scripts/make_envs_script.sh && next dev -p $NEXT_PUBLIC_APP_PORT' |

tools/scripts/dev.sh

@@ -8,13 +8,14 @@ dotenv \
   -e .env \
   -- bash -c './deploy/scripts/download_assets.sh ./public/assets/configs'
 
-yarn svg:build-sprite
+source ./deploy/scripts/build_sprite.sh
 echo ""
 
 # generate envs.js file and run the app
 dotenv \
   -v NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD) \
   -v NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \
+  -v NEXT_PUBLIC_ICON_SPRITE_HASH="${NEXT_PUBLIC_ICON_SPRITE_HASH}" \
   -e .env.secrets \
   -e .env.development.local \
   -e .env.local \

tools/scripts/pw.sh

@@ -8,6 +8,8 @@ dotenv \
   -e $config_file \
   -- bash -c './deploy/scripts/make_envs_script.sh ./playwright/envs.js'
 
+# Important to set this variable here, so the sprite will be built correctly
+export NEXT_PUBLIC_APP_ENV=pw
 yarn svg:build-sprite
 
 # Check if the "--affected" argument is present in the script args

ui/shared/IconSvg.tsx

@@ -3,7 +3,9 @@ import { Skeleton, chakra } from '@chakra-ui/react';
 import { type IconName } from 'public/icons/name';
 import React from 'react';
 
-export const href = '/icons/sprite.svg';
+import config from 'configs/app';
+
+export const href = config.app.spriteHash ? `/icons/sprite.${ config.app.spriteHash }.svg` : '/icons/sprite.svg';
 
 export { IconName };