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:
const iconSet = await importDirectory('files/svg', {
prefix: 'test',
});To catch errors, use try and catch:
let 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:
(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.