mergeIconData()

This function is part of Iconify Utils package.

Function mergeIconData() merges data for icon and alias.

Merging logic

When combining icon and alias, properties cannot be simply merged. This is because transformations for alias are relative to parent icons' transformations.

For example, if icon has 90 degrees rotation and alias also has 90 degrees rotation, result is 180 degrees rotation. Same for horizontal and vertical flip.

Usage

Function has the following parameters:

• icon, IconifyIcon. Icon data.
• alias, IconifyOptional. Alias data.

Function returns merged icon data.

Example

usage.ts

tsimport type { IconifyIcon, FullIconifyIcon } from '@iconify/utils';
import { mergeIconData, defaultIconProps } from '@iconify/utils';

// Rotate icon
const icon1: IconifyIcon = {
   body: '<path d="M7 6v12l10-6z" fill="currentColor"/>',
   width: 24,
   height: 24,
};
const result1 = mergeIconData(icon1, {
   rotate: 1,
});
console.log(result1);

// Merge full icon
const icon2: FullIconifyIcon = {
   ...defaultIconProps,
   body: '<path d="M7 6v12l10-6z" fill="currentColor"/>',
   width: 24,
   height: 24,
   hFlip: true,
};
// Result has the same type as first parameter, so in this case Required<IconifyIcon>
const result2 = mergeIconData(icon2, {
   hFlip: true,
});
console.log(result2);

Result 1:

json{
   "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>",
   "width": 24,
   "height": 24,
   "rotate": 1
}

Result 2:

json{
   "left": 0,
   "top": 0,
   "width": 24,
   "height": 24,
   "rotate": 0,
   "vFlip": false,
   "hFlip": false,
   "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>"
}