Export SVGs using Iconify Utils

This tutorial is part of code examples for Iconify Utils.

Export SVGs

This is an example of using Iconify Utils to generate SVGs from the icon set:

demo.ts

tsimport type { IconifyJSON } from '@iconify/types';
import { readFileSync, writeFileSync, mkdirSync } from 'fs';

// Various functions from Iconify Utils
import { parseIconSet, iconToSVG } from '@iconify/utils';

// Source file and target directory
const source = 'icon-sets/mdi-light.json';
const target = 'svg/mdi-light';

// Read icon set from file
const iconSet = JSON.parse(readFileSync(source, 'utf8')) as IconifyJSON;

// Create directory for output if it does not exist
try {
   mkdirSync(target, {
       recursive: true,
   });
} catch {}

// Parse all icons
parseIconSet(iconSet, (name, data) => {
   if (!data) {
       // Invalid icon
       return;
   }

   // Generate SVG
   const renderData = iconToSVG(data, {
       // 'auto' keyword uses viewBox width/height for icon width/height
       height: 'auto',
   });

   // Generate attributes for SVG element
   const svgAttributes = {
       xmlns: 'http://www.w3.org/2000/svg',
       ...renderData.attributes,
   } as Record<string, string>;
   const svgAttributesStr = Object.keys(svgAttributes)
       .map(
           (attr) =>
               // No need to check attributes for special characters, such as quotes,
               // they cannot contain anything that needs escaping.
               `${attr}="${svgAttributes[attr as keyof typeof svgAttributes]}"`
       )
       .join(' ');

   // Generate SVG
   const svg = `<svg ${svgAttributesStr}>${renderData.body}</svg>`;

   // Write SVG
   const filename = `${target}/${name}.svg`;
   writeFileSync(filename, svg, 'utf8');
   console.log('Written:', filename);
});

Functions

Functions used in this code sample:

• parseIconSet() to parse icon set, calling callback for each icon.
• iconToSVG() to generate attributes and HTML for SVG.
• replaceIDs() to create unique IDs, though it is commented out. Use it if you are embedding output in HTML.

Source

For icon set source, this example uses .json file in IconifyJSON format.

You can also use individual icon set package or full icon sets package. Point source variable to .json file from one of those packages.

Output

This example writes all SVGs to the file system. Change target variable to point to different directory.