Iconify Utils

Iconify Utils is a set of reusable functions that are used by various Iconify icon components and related packages:

  • Parsing Iconify icon sets in IconifyJSON format.
  • Exporting icons from IconifyIcon format (can be extracted from icon set) as SVG.
  • Parsing and validating icon names.
  • Parsing and validating colors.
  • Parsing emoji sequences, generating regular expressions to find emojis in text.

Library is written in TypeScript, is available as ES modules for modern development and CommonJS for older scripts.

Installation

To install library run:

npm install @iconify/utils@next --save

Examples

Documentation for each function below includes code samples.

In addition to that, there are several bigger code samples for specific commonly used tasks to help you figure out what functions to use.

Functions

Icon sets are stored in IconifyJSON format. Functions for working with icon sets:

Functions for working with IconifyIcon format that represents one icon:

When rendering icon, customisations can be applied to it. For example, changing dimensions, rotating or flipping icon. They are represented by IconCustomisations type. Functions for working with customisations:

Functions for rendering icon:

Functions for working with icon names:

Functions for working with colors:

  • stringToColor(value) converts string to Color object, returns null on error. This can be used to validate user input. It supports color keywords, hexadecimal colors, RGB, HSL, LAB and LCH colors. Variables are not supported because this is meant for parsing SVGs, which should not reference any external variables.
  • compareColors(color1, color2) compares colors. It also converts RGB to HSL if needed.
  • colorToString(color) converts Color object to string. Combined with stringToColor(), this can be used to validate and clean up user input.

Advanced usage

Iconify Utils can do only basic parsing of IconifyJSON and IconifyIcon data. It is not meant for more complex stuff.

For more complex stuff, such as importing icons, validating icon code, changing palette, cleaning up, exporting to various formats, see Iconify Tools package.