IconifyIconCustomisations type

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

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

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

Display mode

Display mode has only one property:

  • inline, boolean. true if generated icon should have negative verticalAlign.

Adding "verticalAlign: -0.125em" makes icon aligned below baseline, so it behaves like an icon font glyph instead of image.

Dimensions

Icon dimensions have 2 properties:

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

  • null not set.
  • number number in pixels.
  • string number with units, such as "1em".
  • "auto" is a special keyword, which 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.

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".

Alignment

Unlike other images, if you use incorrect proportions for icon dimensions, SVG does not stretch.

So if you set both width and height with proportions that do not match icon's proportions, you can align icon using these properties:

  • hAlign is for horizontal alignment. Possible values are "left", "center" (default), "right".
  • vAlign is for vertical alignment. Possible values are "top", "middle" (default), "bottom".
  • slice, boolean tells browser how to fill icon. If true, icon will be resized to fill entire area, slicing parts that do not fit. If false (default), icon will be resized to fit, adding extra space on sides.

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.

FullIconifyIconCustomisations type

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

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

import { defaults } from '@iconify/utils/lib/customisations';

const fullCustomisations = {
   ...defaults,
   hFlip: true,
};

Then result can be used with iconToSVG() function.