Iconify Documentation
•

Exporting icons

This article explains how to convert Iconify JSON collection to SVG.

There are 3 ways to do that:

Convert JSON to SVG using @iconify/tools

Iconify Tools are designed for converting different sources to JSON files and cleaning up icons, however there are functions for importing JSON files and exporting individual SVG files, so it can be used to convert JSON to SVG.

Install @iconify/tools by running npm install @iconify/tools then create file "export.js" with content like this:

"use strict";

const tools = require('@iconify/tools');

tools.ImportJSON(__dirname + '/mdi.json').then(collection => {
    return tools.ExportDir(collection, 'output', {
        includePrefix: false,
        includeAliases: true
    });
}).then(result => {
    console.log('Exported ' + result + ' icons.');
}).catch(err => {
    console.error(err);
});

Then run node export to run export.js

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

Change file name and directory name as needed.

Convert JSON to SVG using @iconify/json-tools

Unlike previous example, this example requires a bit more coding.

However you have more control over each icon, so you can do things like change color (add "color" attribute to getSVG() parameter), resize, transform icon and add bounding box (add "box": true to getSVG() parameter) so icons would keep their viewBox when imported to some image editors that usually ignore viewBox.

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

"use strict";

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

let source = __dirname + '/mdi.json';
let target = __dirname + '/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.');

Then run node export to run export.js

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

Change file name and directory name as needed.

PHP alternative

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 content like this:

<?php

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

$source = __DIR__ . '/mdi.json';
$target = __DIR__ . '/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";

Then 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".

Change file name and directory name as needed.