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