Skip to content

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 are asynchronous and work with SVG instances.

Async

If you are not familiar with asynchronous functions in JavaScript, read up on Promise class, async and await keywords.

The simplest way to use asynchronous functions is to wrap all your code in anonymous asynchronous function, then await functions:

tsconst iconSet = await importDirectory('files/svg', {
   prefix: 'test',
});

To catch errors, use try and catch:

tslet iconSet: IconSet;
try {
   iconSet = await importDirectory('files/svg', {
       prefix: 'test',
   });
} catch (err) {
   console.error(`Failed to import directory:`, err);
   return;
}

Check out various tutorials for async and await. There are many free good tutorials on YouTube.

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:

ts(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) {
           // Change colors to red
           await 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.

Released under the Apache 2.0 License.