Skip to content
On this page

Exporting SVG

This tutorial is part of export functions documentation in Iconify Tools.

IconSet instance has toString() function that exports icon as string. You can use forEach() to loop all icons in icon set.

Example

example.ts
tsimport { promises as fs } from 'fs';
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 {
           // Cleanup 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 all icons
   await iconSet.forEach(async (name) => {
       const svg = iconSet.toString(name);
       if (!svg) {
           return;
       }

       // Save to file
       await fs.writeFile(`output/${name}.svg`, svg, 'utf8');
       console.log(`Saved output/${name}.svg (${svg.length} bytes)`);
   });
})();

Released under the Apache 2.0 License.