Generating icon bundles with JSON Tools
This tutorial is a part of Iconify icon bundles tutorial.
You can use Iconify JSON Tools to generate data for icon bundles. This method requires some coding, but it can be used to automate bundle creation.
Iconify JSON Tools library is available in Node.js and PHP, so you can choose which programming language to use. See Iconify JSON Tools for installation instructions.
Requirements
Node.js (deprecated, use Iconify Utils instead) or PHP.
Steps
Logic of creating bundle with Iconify JSON Tools:
- Load icon set.
- Filter icons.
- Convert to string.
- Wrap in a function, see wrapper functions for details.
Loading icon set
To load an icon set, use functions loadFromFile or loadIconifyCollection.
Documentation for functions:
const { Collection } = require('@iconify/json-tools');
const collection = new Collection();
if (!collection.loadIconifyCollection('mdi')) {
console.error('Failed to load Material Design Icons');
}
use \Iconify\JSONTools\Collection;
$collection = new Collection();
if (!$collection->loadIconifyCollection('mdi')) {
throw new \Exception('Failed to load Material Design Icons');
}
Filter icons
After loading icon set, you need to filter icon data.
Use getIcons function. See getIcons() documentation.
const data = collection.getIcons(['arrow-left', 'arrow-right', 'home']);
$data = $collection->getIcons(['arrow-left', 'arrow-right', 'home']);
Variable data contains IconifyJSON object.
Export to JSON string
Then convert IconifyJSON to string:
const str = JSON.stringify(data);
$str = json_encode($data);
Wrap in a callback
This step is different for different Iconify icon components. See wrapper function for icon bundles.
Also check out code examples for full examples.