IconifyAlias type​

All Iconify libraries share common object structures. They are described as types in@iconify/types NPM package.

For description of types and short explanation of TypeScript seetypes documentation.

This article describesIconifyAlias type.

IconifyAlias type​

TypeIconifyAlias represents an alias for icon. It is used in Iconify JSON files.

What is an alias? An alias is icon that reuses another icon's properties.

arrow-left could be an alias ofarrow-right with horizontal flip enabled. No need to create new shape when existing shape can be reused with a simple transformation.

battery-empty could be an alias ofbattery-0 without any changes. This makes it possible to assign multiple names to the same icon.

Structure​

TypeIconifyAlias is similar toIconifyIcon.

Properties:

• parent,string. Name of parent icon, required.

Other properties are fromIconifyOptional type, they are shared withIconifyIcon type.

Properties forviewBox:

• left,number. Left position ofviewBox. Default value is0.
• top,number. Top position ofviewBox. Default value is0.
• width,number. Width ofviewBox. Default value is16.
• height,number. Height ofviewBox. Default value is16.

Transformations:

• rotate,number. Number of 90 degrees rotations. Default value is0.
• hFlip,boolean. Horizontal flip. Default value isfalse.
• vFlip,boolean. Vertical flip. Default value isfalse.

Parent icon​

Parent icon name should not include icon set prefix, and parent icon must be present in the icon set.

If you use another alias as a parent, make sure there are no circular dependencies. For example, ifarrow-left is an alias ofarrow-right (with horizontal flip), which in turn is an alias ofarrow-up (with 90 degrees rotation), which in turn is an alias ofarrow-down (with vertical flip),arrow-down could not be an alias ofarrow-left because that would create a loop.

To be safe, use only icons as parent, not other aliases.

Merging properties for icon and alias​

If, when merging properties, an icon alias has a property that parent icon also has, the following rules apply:

• hFlip andvFlip. Result isicon.hFlip !== alias.hFlip. That means if both icon and alias are flipped horizontally, the result will not be flipped (horizontal flip + horizontal flip cancel each other). If only one of the items is flipped horizontally, the result will be flipped (horizontal flip + no flip = horizontal flip).
• rotate. The result is a sum of rotations. That means 90 degrees rotation + 180 degrees rotation = 270 degrees rotation.

For all other properties alias overrides parent icon's value.

Examples of merging icon and alias:

In the example above,hFlip + hFlip =false,!vFlip/* default value */ + vFlip =true, icon alias overwrote other properties.

Examples​