forEach()

This function is part of IconSet class in Iconify Tools.

Function forEach() runs a custom callback for all icons in icon set.

Function supports asynchronous callbacks.

If you use synchronous callback, you can treat function as synchronous, or you can use forEachSync() alias.

Usage

Function has the following parameters:

• callback. Callback. See below.
• type, string[]. Optional. Icon types to iterate, default is ['icon', 'variation', 'alias'] (all items).

Callback

Callback can be synchronous or async. It has the following parameters:

• name, string. Icon name.
• type, string. Icon type (see below).

If callback returns false, function stops iterating icons.

Icon types

There are 3 types of icon items in IconSet: "icon", "variation", "alias".

"icon" represents a full unique icon.

"variation" represents variation of another icon. It has the following properties:

• parent, string. Name of parent icon.

and at least one of the transformations:

• rotate rotation by 90, 180 or 270 degrees.
• hFlip horizontal flip.
• vFlip vertical flip.

Variations make it easy to create clones of icons, such as arrow-left after creating arrow-right.

"alias" is an alternative name for icon. It has the following property:

• parent, string. Name of parent icon.

Aliases can be created to have different name for icon. If you have renamed some icon, alias can be used to allow users to use old name.

Example

example.ts

tsimport { IconSet, cleanupSVG, parseColors, isEmptyColor } from '@iconify/tools';

const iconSet = new IconSet({
   prefix: 'codicon',
   icons: {
       'add': {
           body: '<g fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></g>',
       },
       'debug-pause': {
           body: '<g fill="currentColor"><path d="M4.5 3H6v10H4.5V3zm7 0v10H10V3h1.5z"/></g>',
           hidden: true,
       },
       'triangle-left': {
           body: '<g fill="currentColor"><path d="M10.44 2l.56.413v11.194l-.54.393L5 8.373v-.827L10.44 2z"/></g>',
       },
   },
   aliases: {
       'plus': {
           parent: 'add',
       },
       'triangle-right': {
           parent: 'triangle-left',
           hFlip: true,
       },
   },
});

// Synchronous example: renaming all icons
console.log('Starting synchronous forEachSync()');
iconSet.forEach((name) => {
   iconSet.rename(name, 'renamed-' + name);
   console.log(`Renaming: ${name}`);
});
console.log('Completed synchronous forEachSync()');

// Async example: cleaning up icons.
// Wrap code in anonymous async function for asynchronous use case.
console.log('Starting async forEach()');
(async () => {
   await iconSet.forEach(async (name, type) => {
       if (type !== 'icon') {
           // Ignore aliases and variations: they inherit content from parent icon, so there is nothing to change
           return;
       }

       const svg = iconSet.toSVG(name);
       if (svg) {
           // Clean up icon
           console.log(`Cleaning up: ${name}`);
           try {
               cleanupSVG(svg);
           } catch (err) {
               // Something went wrong: remove icon
               iconSet.remove(name);
               return;
           }

           // Change colors to red
           parseColors(svg, {
               defaultColor: 'red',
               callback: (attr, colorStr, color) => {
                   return !color || isEmptyColor(color) ? colorStr : 'red';
               },
           });

           // Update code
           iconSet.fromSVG(name, svg);
       }
   });

   console.log('Completed async forEach()');
})();

console.log(
   'End of code... (this code is executed before icons are cleaned up, this is why async anonymous function is needed)'
);

Result:

Starting synchronous forEach()
Renaming: add
Renaming: debug-pause
Renaming: triangle-left
Renaming: plus
Renaming: triangle-right
Completed synchronous forEach()
Starting async forEach()
Cleaning up: renamed-add
End of code... (this code is executed before icons are cleaned up, this is why async anonymous function is needed)
Cleaning up: renamed-debug-pause
Cleaning up: renamed-triangle-left
Completed async forEach()