Skip to content

IconSet class

IconSet class in Iconify Tools represents an icon set.

Usage

To create an instance, use this code to import existing IconifyJSON data:

tsimport { IconSet } from '@iconify/tools';

const iconSet = new IconSet({
   prefix: 'codicon',
   icons: {
       'add': {
           body: '<g fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></g>',
       },
       'chrome-maximize': {
           body: '<g fill="currentColor"><path d="M3 3v10h10V3H3zm9 9H4V4h8v8z"/></g>',
       },
       'chrome-minimize': {
           body: '<g fill="currentColor"><path d="M14 8v1H3V8h11z"/></g>',
       },
   },
});

or this to create an empty icon set:

tsimport { blankIconSet } from '@iconify/tools';

const iconSet = blankIconSet('some-prefix');

Constructor does not validate the icon set. If you are not sure about the source, you need to validate it using validateIconSet() from Iconify Utils.

Functions

Working with icons:

Functions for importing/exporting icon set:

Functions for working with metadata:

  • info property contains icon set info in IconifyInfo type (or null if info is not available). To update info, write to property.
  • chars() returns characters map, where key is character (as hexadecimal code) and value is icon name.
  • toggleCharacter(name, char, add) adds or removes character for icon.
  • listCategory(category) lists all icons in category, excluding aliases and hidden icons.
  • toggleCategory(name, category, add) adds or removes category for icon.
  • categories property contains data for categories. You can access it directly if needed.
  • checkTheme() checks prefixes or suffixes, returning list of icons that belong to each theme and list of icons that do not belong to any theme.
  • suffixes and prefixes properties contain prefixes and suffixes. Access properties directly to update themes.

Other:

  • mergeIconSets() merges two IconSet instances, returning new instance. This function is intended to be used to update the icon set.

Working with icons

All icon optimisation and parsing functions work with SVG instances. How to apply those functions to an entire icon set?

It can be done by icons using forEach() method:

tsiconSet.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) {
       // Change colors to red
       parseColors(svg, {
           defaultColor: 'red',
           callback: (attr, colorStr, color) => {
               return !color || isEmptyColor(color) ? colorStr : 'red';
           },
       });

       // Update icon from SVG instance
       iconSet.fromSVG(name, svg);
   }
});

// The rest of code here

Released under the Apache 2.0 License.