Skip to main content

Utilities

createIconSetFromIcoMoon​

The createIconSetFromIcoMoon utility function is designed to translate the specific JSON configuration format generated by the IcoMoon app (selection.json) into a simplified key-value map that IconProvider can understand.

Here is a breakdown of how it works:

1. Input Structure (IcoMoonConfig)​

The function accepts a configuration object (typically your imported selection.json). IcoMoon configuration files have a specific structure where icons is an array of objects, each containing a properties object with a name string and a code number.

type IcoMoonIcon = {
  properties: {
    name: string; // e.g., "home, house"
    code: number; // e.g., 59648 (decimal for unicode)
  };
};

2. Processing Logic​

The function performs the following operations:

  1. Iterates through Icons: It loops through every icon entry in config.icons.
  2. Splits Names (Aliases): IcoMoon allows you to assign multiple names to a single icon, separated by commas (e.g., "menu, hamburger"). The function calls .split(/\s*,\s*/g) on the name string to separate these into individual keys.
  3. Converts Code Points: It takes the numeric code property (which is the decimal representation of the unicode character) and converts it into an actual string character using String.fromCodePoint(code).

3. Output (Record<string, string>)​

It returns a glyphMap object where:

  • Keys are the icon names (and their aliases).
  • Values are the actual unicode characters (glyphs) that the font file will render as icons.

This output map is exactly what IconProvider expects for its icons prop, allowing you to use <Icon name="star" /> in your application.