Importing icons

Iconify Tools can import icons from several sources.

Usage

All functions listed below are asynchronous. Most functions create IconSet instances.

Before using Iconify Tools, you should be aware that package is opinionated. Certain SVG elements are not allowed and will cause import to fail. See SVG import limitations.

Async

Most functions are asynchronous.

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.

Cleanup

After importing icons, make sure you validate them. See cleanupSVG() function.

Import functions

There are several functions for importing icons:

importDirectory()

Functions importDirectory() and importDirectorySync() import SVG files from directory.

importFromFigma()

Function importFromFigma() imports icons from Figma document.

Importing single icon

Making a function for importing a single file is redundant. All you have to do is read file and create SVG instance.

See importing SVG documentation.

Importing Iconify icon set

Making a function for importing IconifyJSON data is also redundant. All you have to do is read file and create IconSet instance.

See importing Iconify icon set documentation.