Using Iconify Utils Examples

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:

  1. Load icon set.
  2. Filter icons.
  3. Convert to string.
  4. 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:

Node.js
const { Collection } = require('@iconify/json-tools');

const collection = new Collection();
if (!collection.loadIconifyCollection('mdi')) {
   console.error('Failed to load Material Design Icons');
}
PHP
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.

Node.js
const data = collection.getIcons(['arrow-left', 'arrow-right', 'home']);
PHP
$data = $collection->getIcons(['arrow-left', 'arrow-right', 'home']);

Variable data contains IconifyJSON object.

Export to JSON string

Then convert IconifyJSON to string:

Node.js
const str = JSON.stringify(data);
PHP
$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.