Generate SVG with Iconify Utils

This method requires a bit of coding, using Node.js.

If you are not using Node.js or not comfortable with the code below, consider other methods of generating CSS for icons.

Process

How it works:

• Load icon set data.
• Export icons as SVG files.

In the end, you'll have thousands of SVG files, which you can embed in HTML.

How you embed SVG in HTML depends on your project. If you can't automate it, simply copy/paste code from .svg file to .html file where you want to use icon.

Node.js

If you do not have a Node.js app, you need to create one to generate CSS.

There are plenty of tutorials on how Node.js works, short version of steps:

• Install Node.js on your computer.
• Create directory for the project, run npm init -y to initialise it.

Dependencies

You need to install 2 dependencies:

• @iconify/utils to install Iconify Utils that have function to generate CSS.
• @iconify/json to install data for all open source icon sets.

To install them, run

npm install --save-dev @iconify/utils @iconify/json

Scripts

There are two sample scripts, use whichever works better for your use case:

• Script that exports all icons as .svg files from an icon set.
• Script with function that generates SVG for selected icon.

Export all icons

This script exports all icons from icon set as .svg files.

Process of generating SVG files is simple:

• Load icon set.
• Parse it to list all icons.
• In callback generate .svg files for each icon.

jsimport { mkdir, readFile, writeFile } from 'node:fs/promises';
import { iconToSVG, iconToHTML, parseIconSetAsync } from '@iconify/utils';
import { locate } from '@iconify/json';

/**
* Dimensions of generated SVG:
* - '1em' -> 1em, easy to resize icons with font-size.
* - 'auto' -> same as icon's viewBox.
* - 'unset' -> no width/height in generated icons. You'll need to assign width and height in CSS.
*/
const height = '1em';

/**
* List of icon sets you want to export
*
* @type {string[]}
*/
const prefixes = ['mdi', 'mdi-light'];

/**
* Output directory for SVG
*/
const target = 'assets/svg';

// Parse each icon set
for (let i = 0; i < prefixes.length; i++) {
   const prefix = prefixes[i];

   // Find location of .json file
   const filename = locate(prefix);

   // Load file and parse it
   /** @type {import("@iconify/types").IconifyJSON} */
   const iconSet = JSON.parse(await readFile(filename, 'utf8'));

   // Create output directory if it doesn't exist
   const outDir = `${target}/${prefix}`;
   try {
       await mkdir(outDir, {
           recursive: true,
       });
   } catch {}

   // Get all icons
   let counter = 0;
   await parseIconSetAsync(iconSet, async (name, data) => {
       if (!data) {
           // Failed icon
           return;
       }

       // Generate SVG
       const { attributes, body } = iconToSVG(data, {
           height,
       });
       const svg = iconToHTML(body, attributes);

       // Save it
       await writeFile(`${outDir}/${name}.svg`, svg, 'utf8');
       counter++;
   });

   // Log it
   console.log(`Exported ${counter} icons from ${iconSet.info?.name || prefix}`);
}

Change options, run it to export SVG files.

Functions from Iconify Utils used in sample:

• parseIconSetAsync() to parse icon set.
• iconToSVG() and iconToHTML() to generate SVG.

Get SVG for icon

This script generates SVG for selected icon.

You can use that function in your build process to generate SVG, which you can embed in HTML.

Process of generating SVG:

• Load icon set.
• Get data for selected icon.
• Generate SVG.

jsimport { readFileSync } from 'node:fs';
import { iconToSVG, iconToHTML, getIconData } from '@iconify/utils';
import { locate } from '@iconify/json';

/**
* Default dimensions of generated SVG:
* - '1em' -> 1em, easy to resize icons with font-size.
* - 'auto' -> same as icon's viewBox.
* - 'unset' -> no width/height in generated icons. You'll need to assign width and height in CSS.
*/
const height = '1em';

/**
* Generate SVG
*
* @param {string} prefix Icon set prefix
* @param {string} name Icon name
* @param {import("@iconify/utils").IconifyIconCustomisations} customisations Optional icon customisations
* @returns {string | undefined} SVG as string, undefined on failure
*/
export function generateSVG(prefix, name, customisations = { height }) {
   // Find and load icon set
   const filename = locate(prefix);

   // Load file and parse it
   /** @type {import("@iconify/types").IconifyJSON} */
   const iconSet = JSON.parse(readFileSync(filename, 'utf8'));

   // Get icon data
   const data = getIconData(iconSet, name);
   if (!data) {
       return;
   }

   // Generate SVG
   const { attributes, body } = iconToSVG(data, {
       height,
   });
   return iconToHTML(body, attributes);
}

// Sample usage
console.log(generateSVG('mdi-light', 'home'));

Functions from Iconify Utils used in sample:

• getIconData() to extract icon data from icon set.
• iconToSVG() and iconToHTML() to generate SVG.