Single SVG Figma

Importing SVG from directory

This function is part of import functions in Iconify Tools.

Function importDirectory() finds and imports all SVG files from a directory.

It creates IconSet instance, which can be exported to various formats.

Usage

Function has the following parameters:

  • dir, string. Directory to import from.
  • options, object. Options (optional).

Function returns IconSet instance.

Function is asynchronous. That means you need to handle it as Promise instance, usually by adding await before function call.

Validation

After importing icons, they need to be:

See example below.

Example

example.ts
import {
   importDirectory,
   cleanupSVG,
   runSVGO,
   parseColors,
   isEmptyColor,
} from '@iconify/tools';

(async () => {
   // Import icons
   const iconSet = await importDirectory('files/svg', {
       prefix: 'test',
   });

   // Validate, clean up, fix palette and optimise
   await iconSet.forEach(async (name, type) => {
       if (type !== 'icon') {
           return;
       }

       const svg = iconSet.toSVG(name);
       if (!svg) {
           // Invalid icon
           iconSet.remove(name);
           return;
       }

       // Clean up and optimise icons
       try {
           // Clean up icon code
           await cleanupSVG(svg);

           // Assume icon is monotone: replace color with currentColor, add if missing
           // If icon is not monotone, remove this code
           await parseColors(svg, {
               defaultColor: 'currentColor',
               callback: (attr, colorStr, color) => {
                   return !color || isEmptyColor(color) ? colorStr : 'currentColor';
               },
           });

           // Optimise
           await runSVGO(svg);
       } catch (err) {
           // Invalid icon
           console.error(`Error parsing ${name}:`, err);
           iconSet.remove(name);
           return;
       }

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

   // Export
   console.log(iconSet.export());
})();