Skip to content
On this page

list()

This function is part of IconSet class in Iconify Tools.

Function list() lists all icons in an icon set.

It replaces existing icon set data, so it is identical to creating new IconSet instance. If you want to merge icon sets instead, see mergeIconSets() function.

Usage

Function has the following parameter:

  • type, string[]. Optional. Icon types to list, default is ['icon', 'variation'].

Function returns array of icon names string[].

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

// 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
(async () => {
   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 {
               await cleanupSVG(svg);
           } catch (err) {
               // Something went wrong: remove icon
               iconSet.remove(name);
               continue;
           }

           // Change colors to red
           await 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"
       }
   }
}

Released under the Apache 2.0 License.