Changing icon content

Before exporting icons, you need to properly fix them. Iconify Tools offers many functions for manipulating icon content: fixing various issues, optimising code, changing palette.

Usage

All functions listed below work with SVG instances.

Working with icon sets

How to use functions to parse all icons in an icon set?

It can be done by using forEach() and forEachSync() methods:

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

Cleanup

Before running any icon manipulation function, you should validate and clean up icon. See cleanupSVG() function.

Functions

There are several functions for manipulating icons:

runSVGO()

Function runSVGO() optimises icon.

Cleaning up icons with cleanupSVG() is not enough. That function is very basic; it does bare minimum to get rid of bad stuff. It is mostly for validation.

Use runSVGO() to properly clean up and optimise icons.

parseColors()

Function parseColors() is used to analyze icon's palette or change it.

Usually icons either do not have palette, relying on fill style or use black colors. Neither option is acceptable for using icons with Iconify. Iconify all icons that do not have hardcoded palette should use currentColor.

This function can be used to change colors, make sure icon does not have colors it is not supposed to have, add colors to shapes that rely on default colors.

deOptimisePaths()

Function deOptimisePaths() makes sure icon would work with old software.

All browsers support modern SVG, which include compressed arcs in <path> elements. However, there is plenty of software that does not. Usually it is image editing software that rely on ancient SVG parsing libraries.

scaleSVG()

Function scaleSVG() changes icon dimensions.

resetSVGOrigin()

Function resetSVGOrigin() shifts top left corner of viewBox to 0.

removeFigmaClipPathFromSVG()

Function removeFigmaClipPathFromSVG() attempts to remove unnecessary clip paths, which are often added when icon is exported in Figma.

convertSVGToMask()

Function convertSVGToMask() converts icon content to mask.

This is useful if you want to change icon with multiple colors into a monotone icon, using source colors as shades.