Exporting icons with Iconify JSON Tools

This article is for deprecated Iconify JSON Tools.

Iconify JSON Tools has been replced with Iconify Utils

Iconify JSON Tools is a library for manipulating JSON icon sets. The library is available for PHP and Node.js, code in both versions is almost identical. See Iconify JSON Tools documentation.

This document shows how to export JSON icon set to individual SVG files.

In addition to Iconify JSON Tools, JSON icon set can be exported to SVG using Iconify Tools.

Unlike Iconify Tools, Iconify JSON Tools requires a bit more coding to export icons. However, you have more control over each icon, so you can do things like change color, resize, transform icon and add bounding box so icons would keep their viewBox when imported to some image editors that usually ignore viewBox.

Node.js

Install @iconify/json-tools by running npm install @iconify/json-tools then create file export.js with the following content:

export.js
'use strict';

const fs = require('fs');
const tools = require('@iconify/json-tools');

// Source file
let source = 'mdi.json';

// Target directory
let target = 'output';

// Load collection
let collection = new tools.Collection();
if (!collection.loadFromFile(source)) {
   console.error('Error loading JSON file.');
   return;
}

// Create directory for export
try {
   fs.mkdirSync(target);
} catch (err) {
   // Do nothing. Assume directory has been created
}

// Export each icon
let icons = collection.listIcons(true);
icons.forEach((name) => {
   // Get icon data
   let data = collection.getIconData(name);

   // Create new SVG object
   let svg = new tools.SVG(data);

   // Generate SVG code
   let code = svg.getSVG({
       height: 'auto', // This will export icons with their original dimensions instead of "1em"
   });

   fs.writeFileSync(target + '/' + name + '.svg', code, 'utf8');
});

console.log('Exported ' + icons.length + ' icons.');

Run node export to run export.js.

This code will convert mdi.json to individual SVG files that will be saved in directory output.

PHP

PHP code is identical to previous example, but written in PHP.

Initialize Composer project, install iconify/json-tools dependency by running composer require iconify/json-tools then create file export.php with the following content:

export.php
<?php

require('./vendor/autoload.php');

// Source file
$source = 'mdi.json';

// Target directory
$target = 'output';

// Load collection
$collection = new \Iconify\JSONTools\Collection();
if (!$collection->loadFromFile($source)) {
   echo "Error loading JSON file.\n";
   return;
}

// Create directory for export
@mkdir($target);

// Export each icon
$icons = $collection->listIcons(true);
foreach ($icons as $name) {
   // Get icon data
   $data = $collection->getIconData($name);

   // Create new SVG object
   $svg = new \Iconify\JSONTools\SVG($data);

   // Generate SVG code
   $code = $svg->getSVG([
       'height' => 'auto' // This will export icons with their original dimensions instead of "1em"
   ]);

   file_put_contents($target . '/' . $name . '.svg', $code);
}

echo 'Exported ', count($icons), " icons.\n";

Run php export.php to run export.php.

This code will convert mdi.json to individual SVG files that will be saved in directory output.

Additional parameters

By default, exported icons will have currentColor as color value, icon height will be set to icon's original dimensions. With Iconify JSON Tools it is very easy to customize exported icons by adding additional properties to getSVG() function.

Example:

// Generate red icon with "1em" height and bounding rectangle
let code = svg.getSVG({
   height: '1em',
   color: 'red',
   box: true,
});
// Generate red icon with "1em" height and bounding rectangle
$code = $svg->getSVG([
   'height' => '1em',
   'color' => 'red',
   'box' => true
]);

See SVG class documentation.

Iconify Tools

In addition to Iconify JSON Tools, JSON icon set can be exported to SVG using Iconify Tools.