Exporting icons
This article explains how to convert Iconify JSON collection to SVG.
There are 3 ways to do that:
- Node.js: using @iconify/tools package (it is used mainly for importing icons).
- Node.js: using @iconify/json-tools package (it is used mainly for API).
- PHP: using iconify/json-tools package.
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:
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:
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:
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.