Appearance

forEach() ​

此函数属于 Iconify Tools 中的 IconSet 类。

函数 forEach() 会为图标集中的所有图标执行自定义回调。

该函数支持异步回调。

如果你使用同步回调，可以将该函数视为同步函数，或者使用 forEachSync() 别名。

用法 ​

该函数包含以下参数：

  • callback。回调函数。见下文。
  • type，string[]。可选。要遍历的图标类型，默认为 ['icon', 'variation', 'alias']（所有项目）。

回调 ​

回调可以是同步或异步的。它包含以下参数：

  • name，string。图标名称。
  • type，string。图标类型（见下文）。

如果回调返回 false，函数将停止遍历图标。

图标类型 ​

IconSet 中包含 3 种类型的图标项："icon"、"variation"、"alias"。

"icon" 表示一个完整的唯一图标。

"variation" 表示另一个图标的变体。它具有以下属性：

  • parent，string。父图标的名称。

以及至少以下变换之一：

  • rotate 旋转 90、180 或 270 度。
  • hFlip 水平翻转。
  • vFlip 垂直翻转。

变体使得创建图标克隆变得很容易，例如在创建 arrow-right 之后创建 arrow-left。

"alias" 是图标的别名。它具有以下属性：

  • parent，string。父图标的名称。

可以创建别名来为图标提供不同的名称。如果您重命名了某个图标，可以使用别名来允许用户继续使用旧名称。

示例 ​

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()