assets/DP-39285-update-all-icons

common/config/rush/command-line.json

@@ -131,6 +131,14 @@
       "allowWarningsInSuccessfulBuild": true,
       "shellCommand": "cd packages/assets && rushx stylelint-fix"
     },
+    {
+      "commandKind": "global",
+      "name": "icons",
+      "summary": "Update all icon files in the assets, patternlab and react packages.",
+      "safeForSimultaneousRushProcesses": false,
+      "allowWarningsInSuccessfulBuild": true,
+      "shellCommand": "node common/scripts/update-icons.js"
+    },
     // {
     //   /**
     //    * (Required) Determines the type of custom command.

common/scripts/update-icons.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+
+function runCommand(command, cwd) {
+  console.log(`\n🔧 Running: ${command}`);
+  console.log(`📁 In directory: ${cwd}`);
+
+  try {
+    execSync(command, { 
+      cwd, 
+      stdio: 'inherit',
+      env: { ...process.env, FORCE_COLOR: '1' }
+    });
+    console.log(`✅ Success: ${command}`);
+  } catch (error) {
+    console.error(`❌ Failed: ${command}`);
+    console.error(`Error: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+function main() {
+  const rootDir = path.resolve(__dirname, '../..');
+
+  console.log('🚀 Starting icon update process...\n');
+
+  // Step 1: Prepare icons in assets package
+  console.log('📦 Step 1: Preparing icons in assets package');
+  const assetsDir = path.join(rootDir, 'packages/assets');
+  if (!fs.existsSync(assetsDir)) {
+    console.error('❌ Assets package directory not found:', assetsDir);
+    process.exit(1);
+  }
+
+  // Check if package.json has prepIcons script
+  const packageJsonPath = path.join(assetsDir, 'package.json');
+  if (fs.existsSync(packageJsonPath)) {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+    if (packageJson.scripts && packageJson.scripts.prepIcons) {
+      runCommand('rushx prepIcons', assetsDir);
+    } else {
+      console.log('⚠️  prepIcons script not found in assets package, skipping...');
+    }
+  }
+
+  // Step 2: Update patternlab icons
+  console.log('\n📦 Step 2: Updating patternlab icons');
+  const patternlabDir = path.join(rootDir, 'packages/patternlab/styleguide');
+  if (fs.existsSync(patternlabDir)) {
+    const packageJsonPath = path.join(patternlabDir, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+      if (packageJson.scripts && packageJson.scripts.icons) {
+        runCommand('rushx icons', patternlabDir);
+      } else {
+        console.log('⚠️  icons script not found in patternlab package, skipping...');
+      }
+    }
+  } else {
+    console.log('⚠️  PatternLab package directory not found, skipping...');
+  }
+
+  // Step 3: Update React icons
+  console.log('\n📦 Step 3: Updating React icons');
+  const reactDir = path.join(rootDir, 'packages/react');
+  if (fs.existsSync(reactDir)) {
+    const packageJsonPath = path.join(reactDir, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+      if (packageJson.scripts && packageJson.scripts.icons) {
+        runCommand('rushx icons', reactDir);
+      } else {
+        console.log('⚠️  icons script not found in react package, skipping...');
+      }
+    }
+  } else {
+    console.log('⚠️  React package directory not found, skipping...');
+  }
+
+  console.log('\n🎉 Icon update process completed!');
+}
+
+main();

packages/assets/build/scss/header-hamburger.scss

@@ -14,11 +14,6 @@
 
 @use '03-organisms/header-hamburger';
 
-@use '01-atoms/svg-loc-icons';
-
-@use '01-atoms/svg-icons';
-
-
 @use '01-atoms/forms';
 
 @use '01-atoms/input-typeahead';

packages/assets/build/scss/header.scss

@@ -16,10 +16,6 @@
 
 @use '01-atoms/buttons';
 
-@use '01-atoms/svg-icons';
-
-@use '01-atoms/svg-loc-icons';
-
 @use '01-atoms/forms';
 
 @use '01-atoms/input';

packages/assets/gulpfile.js

@@ -8,6 +8,8 @@ const concat = require('gulp-concat');
 const terser = require('gulp-terser');
 const del = require('del');
 const path = require('path');
+const prepIcons = require('./scripts/prepIcons');
+
 
 sass.compiler = require('sass');
 
@@ -175,13 +177,21 @@ function compileMiniBrandBanner() {
   .pipe(dest('./js'))
 }
 
+function prepIconsResolve() {
+  return new Promise((resolve) => {
+    prepIcons('./static/images/icons');
+    resolve();
+  });
+}
+
 exports.deleteMainNav = deleteMainNav;
 exports.compileMainNav = compileMainNav;
 exports.compileMiniScss = compileMiniScss;
 exports.compileScss = compileScss;
 exports.clean = clean;
 exports.compileBrandBanner = compileBrandBanner;
 exports.compileMiniBrandBanner = compileMiniBrandBanner;
+exports.prepIcons = prepIconsResolve;
 
 const transpileHeader = series(compileMainNav, parallel(compileHeader, compileMiniHeader), deleteMainNav);
 const transpileHamburgerHeader = parallel(compileHamburgerHeader, compileMiniHamburgerHeader);