Using Iconify API Using JSON Tools

Generating icon bundles with Iconify Utils

This tutorial is a part of Iconify icon bundles tutorial.

You can use Iconify Utils to generate data for icon bundles. This method requires some coding, but it can be used to automate bundle creation.

Requirements

This method requires Iconify Utils that is currently available only in Node.js.

Steps

Logic of creating bundle with Iconify JSON Tools:

  1. Load icon set.
  2. Filter icons.
  3. Convert to string.
  4. Wrap in a callback, see wrapper functions for details.

Loading icon set from file

To load an icon set, load JSON file and parse it:

const filename = 'files/whatever.json';
const iconSet = JSON.parse(await fs.readFile(filename, 'utf8'));

TypeScript

When using TypeScript, cast result to IconifyJSON type:

import type { IconifyJSON } from '@iconify/types';
const iconSet = JSON.parse(await fs.readFile(filename, 'utf8')) as IconifyJSON;

Locating file

If you want to import one of default Iconify icon sets from @iconify/json package, use locate() function:

import { locate } from '@iconify/json';

const filename = locate('mdi');

Loading from Iconify JSON packages

Code above loads icon set from custom file.

If you want to load icon set from @iconify-json/* packages, install package then import icons like this:

import { icons as mdiIconSet } from '@iconify-json/mdi';

You can also use require():

const mdiIconSet = require('@iconify-json/mdi/icons.json');

Filter icons

After loading icon set, you need to filter icon data.

Use getIcons function. See getIcons() documentation.

import { getIcons } from '@iconify/utils/lib/icon-set/get-icons';
const data = getIcons(iconSet, ['arrow-left', 'arrow-right', 'home']);

Variable data contains IconifyJSON object.

Export to JSON string

Then convert IconifyJSON to string:

const str = JSON.stringify(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.