Skip to main content

Icon System Documentation

This document explains the icon system used in our application, including configuration, implementation, and usage.

Icon Configuration in routes.json​

In the routes.json file, you can specify an icon for each route that will appear in the menu. This is done using the icon property:

{
  "//listings": {
    "path": "//listings",
    "key": "SELECT_ORGANIZATION",
    "icon": "FaHotel",
    "name": "My Listings",
    // ... other properties
  }
}

By default, any icon specified in the icon property of a route in routes.json will be automatically added to selectiveIcons This means it will be available for use in the application without any additional configuration.

Additional Icons for Components​

If a component requires more icons than just the menu icon, you can use the extraIcons property in the route configuration. This allows you to specify additional icons that should be loaded for a particular route:

{
  "//landing": {
    "path": "//landing",
    "key": "landing",
    "extraIcons": [
      "rifi.RifiAllCategories",
      "rifi.RifiAppartments",
      "rifi.RifiArtStudio",
      // ... other icons
    ],
    // ... other properties
  }
}

Icon Repository Configuration​

The icon repository configuration is defined in a config.json file . This configuration specifies where different sets of icons can be found. Here's an example of how the iconsRepository should be defined:

{
  "iconsRepository": {
    "accounts": "@pubngo-stack/icons/lib/accounts/accountIcons/{iconName}.js",
    "rifi": "@pubngo-stack/icons/lib/rifi/{iconName}.js",
    "custom": "./path/to/custom/icons/{iconName}.js"
  }
}

In this configuration:

  • The keys (e.g., "rifi", "accounts", "custom") represent the repository prefixes.
  • The values are the paths where the icons can be found, with {iconName} as a placeholder for the specific icon name.

The {iconName} placeholder in the paths will be replaced with the actual name of the icon from extraIcons when it's being loaded.

This configuration allows the selective icons system to know where to find different sets of icons, enabling it to dynamically import the correct icon based on the name provided in the icon or extraIcons properties in the routes configuration.

Usage​

To use the selective icon system in your application:

  1. Import the default function from selectiveIcons.js.
  2. Call the function with the desired icon name.
  3. Handle the returned Promise to render the icon component.

Example:

import getIcon from '@app/selectiveIcons.js';

function IconComponent({ name }) {
    const [Icon, setIcon] = useState(null);

    useEffect(() => {
        getIcon(nameOfIcon).then((module) => setIcon(module.default));
    }, [name]);

    return Icon ? <Icon /> : null;
}

Back to Index | Previous: Configuration Management | Next: Best Practices