Skip to content

Importing SVG

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

There is no special function for importing one icon because it is redundant. All you have to do is read content and create new SVG instance:

Example

example.ts
tsimport { promises as fs } from 'fs';
import {
   SVG,
   blankIconSet,
   cleanupSVG,
   runSVGO,
   parseColors,
   isEmptyColor,
} from '@iconify/tools';

(async () => {
   // Create an empty icon set
   const iconSet = blankIconSet('test');

   // Read icon, create SVG instance
   const content = await fs.readFile('files/home.svg', 'utf8');
   const svg = new SVG(content);

   // Clean up icon code
   cleanupSVG(svg);

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

   // Optimise
   runSVGO(svg);

   // Add icon to icon set
   iconSet.fromSVG('home', svg);
})();

Released under the Apache 2.0 License.