Add new additional icons (#5372)

* Update icon generator script and dependecies

* Add new additional icons (in legacy unthemed style)

* Update script and new icons to support themed mixins

* Updated documentation

* Update link in the relase notes

* Improvements based on review comments

package.json

@@ -66,6 +66,7 @@
     "jest": "29.7.0",
     "js-beautify": "1.15.1",
     "markdown-spellcheck": "1.3.1",
+    "mime": "3.0.0",
     "parker": "0.0.10",
     "postcss": "8.4.47",
     "postcss-cli": "11.0.0",

releases.yml

@@ -12,6 +12,10 @@
       url: /docs/utilities/align#vertical-alignment
       status: New
       notes: We've introduced a new <code>u-vertical-align--middle</code> utility class.
+    - component: Icons
+      url: /docs/patterns/icons#new-icons
+      status: New
+      notes: We added several new icons to the additional icon set.
 - version: 4.16.0
   features:
     - component: CTA Block / Borderless

scripts/convert-svgs-to-icon-mixins.js

@@ -31,10 +31,20 @@ function printBaseMixins(svgs) {
   console.log('//------------------------');
 
   svgs.forEach((svg) => {
-    console.log(`@mixin vf-icon-${svg.name}(${svg.colors.join(', ')}) {`);
-    console.log(` background-image: url("data:image/svg+xml,${encodeSVG(svg.svg, svg.colors)}");`);
-    console.log('}');
-    console.log('');
+    console.log(`
+      // ${svg.name}
+      @function vf-icon-${svg.name}-url($color) {
+        @return url("data:image/svg+xml,${encodeSVG(svg.svg, svg.colors)}");
+      }
+
+      @mixin vf-icon-${svg.name}($color: $colors--light-theme--icon) {
+        background-image: vf-icon-${svg.name}-url($color);
+      }
+
+      @mixin vf-icon-${svg.name}-themed {
+        @include vf-themed-icon($light-value: vf-icon-${svg.name}-url($colors--light-theme--icon), $dark-value: vf-icon-${svg.name}-url($colors--dark-theme--icon));
+      }
+    `);
   });
 }
 
@@ -50,21 +60,17 @@ function printPatternMixins(svgs) {
   console.log('//----------------');
 
   svgs.forEach((svg) => {
-    console.log(`@mixin vf-p-icon-${svg.name} {`);
-    console.log(` .p-icon--${svg.name} {`);
-    console.log('   @extend %icon;');
-    console.log(`   @include vf-icon-${svg.name}(${svg.colors.join(', ')});`);
-    console.log('');
-    console.log("   [class*='--dark'] &,");
-    console.log('   &.is-light {');
-    console.log(`     @include vf-icon-${svg.name}(${svg.colors.join(', ')});`);
-    console.log('   }');
-    console.log(' }');
-    console.log('}');
-    console.log('');
+    console.log(`
+      @mixin vf-p-icon-${svg.name} {
+        .p-icon--${svg.name} {
+          @extend %icon;
+          @include vf-icon-${svg.name}-themed;
+        }
+      }
+    `);
   });
 
-  console.log('// **Base and Pattern mixins accurate as of December 2020**');
+  console.log('// **Base and Pattern mixins accurate as of October 2024**');
 }
 
 function encodeSVG(data, colorVariables) {
@@ -101,10 +107,10 @@ function convertSVGs(directory, files) {
         name: iconName,
       });
     }
-
-    printBaseMixins(convertedSVGs);
-    printPatternMixins(convertedSVGs);
   });
+
+  printBaseMixins(convertedSVGs);
+  printPatternMixins(convertedSVGs);
 }
 
 if (directory) {