list()

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

函数 list() 用于列出图标集中的所有图标。

用法

该函数包含以下参数：

• type，string[]。可选。要列出的图标类型，默认为 ['icon', 'variation']。

函数返回图标名称数组 string[]。

图标类型

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,
       },
   },
});

// List icons and variations
// [ 'add', 'debug-pause', 'triangle-left', 'triangle-right' ]
console.log(iconSet.list());

// List everything
// [ 'add', 'debug-pause', 'triangle-left', 'plus', 'triangle-right' ]
console.log(iconSet.list(['icon', 'variation', 'alias']));

// Icons only
// [ 'add', 'debug-pause', 'triangle-left' ]
console.log(iconSet.list(['icon']));

// Function can also be used to parse all icons in icon set,  though `forEach()` is a better choice for this code
const icons = iconSet.list();
for (let i = 0; i < icons.length; i++) {
   const name = icons[i];
   const svg = iconSet.toSVG(name);
   if (svg) {
       // Clean up icon
       try {
           cleanupSVG(svg);
       } catch (err) {
           // Something went wrong: remove icon
           iconSet.remove(name);
           continue;
       }

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

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

// Export updated icon set
console.log(iconSet.export());

Result of export():

json{
   "prefix": "codicon",
   "icons": {
       "add": {
           "body": "<g fill=\"red\"><path d=\"M14 7v1H8v6H7V8H1V7h6V1h1v6h6z\"/></g>"
       },
       "debug-pause": {
           "body": "<g fill=\"red\"><path d=\"M4.5 3H6v10H4.5V3zm7 0v10H10V3h1.5z\"/></g>",
           "hidden": true
       },
       "triangle-left": {
           "body": "<g fill=\"red\"><path d=\"M10.44 2l.56.413v11.194l-.54.393L5 8.373v-.827L10.44 2z\"/></g>"
       },
       "triangle-right": {
           "body": "<g transform=\"translate(16 0) scale(-1 1)\"><g fill=\"red\"><path d=\"M10.44 2l.56.413v11.194l-.54.393L5 8.373v-.827L10.44 2z\"/></g></g>"
       }
   },
   "aliases": {
       "plus": {
           "parent": "add"
       }
   }
}