IconifyIconCustomisations type

IconifyIconCustomisations type is used in Iconify Utils in functions for generating SVG.

You can find this type in src/customisations/defaults.ts of Iconify Utils source code.

Type is an object, with the following properties, split into groups:

Dimensions

Icon dimensions, which has type IconifyIconSizeCustomisations, have 2 properties:

• width, IconifyIconSize icon width.
• height, IconifyIconSize icon height.

Type IconifyIconSize is alias for null|string|number. Possible values are:

• number number in pixels.
• string number with units, such as "1em".

There are several special keywords:

• "auto" sets dimension to value from icon's viewBox. So if icon has viewBox="0 0 24 24", setting width to "auto" sets it to 24.
• "unset" and "none" tell function to skip attribute. This makes it easy to use width and height in CSS.

When calculating icon dimensions, setting one dimension (usually height) is enough. Another dimension will be automatically calculated using icon's proportions.

If both width and height are not set or null, by default height will be set to "1em".

Transformations

Icon can be transformed. Transformations are done by rotating or flipping content inside SVG, these are not CSS transformations. Properties for transforming icon:

• hFlip, boolean. Flips icon horizontally.
• vFlip, boolean. Flips icon vertically.
• rotate, number. Rotates icon in 90 degrees steps. 1 is 90deg, 2 is 180deg, 3 is 270deg. Rotation is limited only to these angles because these angles guarantee that icon content does not go beyond viewBox boundaries. If you want to rotate using different angle, use CSS rotation that rotates an entire icon with bounding box.

If you want to pick only transformations from customisations, use type IconifyTransformations.

FullIconifyIconCustomisations type

Type FullIconifyIconCustomisations is the same as IconifyIconCustomisations, but all properties are required.

Use defaultIconCustomisations constant to get all default values and merged it with your values:

example.ts

tsimport { defaultIconCustomisations } from '@iconify/utils';
import type {
   IconifyIconCustomisations,
   FullIconCustomisations,
} from '@iconify/utils';

// Partial customisations
const customisations: IconifyIconCustomisations = {
   hFlip: true,
};

// Merge with defaults to get full customisations
const fullCustomisations: FullIconCustomisations = {
   ...defaultIconCustomisations,
   ...customisations,
};

console.log(fullCustomisations);

Then result can be used with mergeCustomisations() function.

Also see defaultIconCustomisations constant.