Installing Custom Icon Pack #

To be able to use custom icon in xbase-ui components, you need to register it in oruga configuration.

Create Custom Icon Configuration #

theme-xbase-ui-tw provide xb icon pack to be used inside components. But you will still be able to add more icon pack(s) or replace it for good. If you wish to use custom icon pack, you can install it and create additional configuration.

Available Option #

CustomIconPacks #

Add any icon packs you wish to use in your project.

customIconPacks.<icon-pack-name>.iconPrefix. Your custom icon prefix class

customIconPacks.<icon-pack-name>.sizes. If your custom icon has size classes such as icon-sm, icon-lg, etc., use this option to define them.

customIconPacks.<icon-pack-name>.internalIcons. Use this option to replace oruga's internal icons with equivalent icon of you custom icon pack. Please take a look at below example for list of internal icons to be replaced.

StatusVariantIcon #

Override default icon for oruga components like input, notification, etc. You can also define custom variant besides 'success', 'danger', 'info', and 'warning'.

Here's an example of custom icon configuration.

If you wish to use both xb icon and your own custom icon, you can import customIconConfig from theme-xbase-ui-tw and include it inside your configuration using spread operator. Here's an example.

Import CSS File And Register The Configuration #

Import css file(s) and pass the configuration as you install oruga. If your icon pack comes from external module, make sure you have installed it to your project.