Customization # 

Basically, the "iconName" is used to identify an icon pack, such as Font Awesome with "fa" or Material Design with "mdi". The "iconName" can also serve as the default configuration for the icon library if desired by the user.

To replace the default configuration of this icon library, you can refer to this link for more information. In the provided code, you will find the "iconPack" field, which you can modify with the desired icon pack to set it as the default. In this case, if the user wants to use their custom icon library called "myIcon," they would register it in the "iconPack" field. For example:

In the example above, you successfully registered the name of the icon that you designated as the default for all the icons in the library. However, if it is a custom icon, you still need to add the configuration for your own custom icon within the customIconPacks object, as shown in the example below:

After adding your custom icon to the custom icon pack, don't forget to include the corresponding CSS icon in the main.js file as well.

Each icon library has its own prefix, such as "fa-" for Font Awesome and "mdi-" for Material Design Icons. Therefore, for each custom icon, it is necessary to provide an icon prefix as a marker in the configuration to indicate the registered icon.

The iconPrefix is useful when the user utilizes a component that includes icon features and relies solely on the icon name prop.

In the provided example, the user only needs to specify the icon name without the prefix. This is because the library takes care of rendering the prefix itself when the DOM is successfully generated.

The library will render a properly formatted DOM and automatically add the corresponding iconPrefix to the icon being used by the user. However, this condition is applicable only if the icon has been properly registered in the configuration and has an associated prefix.

When a user utilizes an icon, they naturally expect it to be displayed in their desired size. However, there are instances where the rendered icon appears smaller or does not match the intended size.

Oruga provides a feature that includes standard size names for icons. For example, "small" can be used to achieve an extra-small (xs) icon size, while "large" corresponds to an extra-large (xl) size. To apply these icon sizes, the user needs to register each size within the "sizes" configuration.

An example is provided below:

Using the size prop is similar to using the iconPrefix, where the user only needs to specify the size by mentioning the size name, without the need for a class name.

In the provided example, we utilize the size name as the prop value instead of a class name. As a result, the rendered output will appear as follows

Another important attribute is internalIcons. The internalIcons feature serves to replace the default icon provided by Oruga or Xbase-UI with a new icon that has been registered and selected by the user.

For example, in the Notification component of Oruga the default icon for a successful notification is information and cannot be changed. However, users may want to utilize their previously mentioned custom icon pack, "myIcon". Within "myIcon", there is no icon named information, so the icon will not be displayed after rendering. Therefore, if the user wishes to display an icon, they need to register an icon substitution in the "internalIcons" configuration. For example, if the user wants to replace the information icon with a check-mark icon from "myIcon".

In the provided code snippet, it states that within the internalIcons configuration, the icon name information is replaced with the check-mark icon. Therefore, after the rendering process is complete, the displayed icon will be the check-mark instead of the information.