Types used in components

This tutorial is part of Svelte Components for Iconify Icon Finder tutorial.

These types are used in components.


Type IconCustomisations represents icon customisations. It is a simple object with few properties:

  • color, string. Icon color.
  • width, string. Icon width.
  • height, string. Icon height.
  • rotate, number. Rotation. 1 = 90deg, 2 = 180deg, 3 = 270deg.
  • hFlip, boolean. Horizontal flip.
  • vFlip, boolean. Vertical flip.

Type PartialIconCustomisations is identical to IconCustomisations, but all properties are optional.

You can find type definition in src/icon-finder/customisations/types.ts.


Type IconFinderState is used to send full state of Icon Finder instance. It is used in "button" event. Value is a simple object with few properties:

  • icons, Icon[]. Selected icon(s).
  • route, PartialRoute. Current route.
  • customisation, PartialIconCustomisations. Customisations for selected icon(s).
  • config, IconFinderConfig. Icon Finder configuration, only customised properties.

All properties, except for icons are optional.

All values contain only modified elements. For example, if icon is not rotated, customisation will not have property rotate.

You can find type definition in src/icon-finder/wrapper/state.ts.