Appearance

mergeIconData() ​

此函数属于 Iconify Utils 包。

函数 mergeIconData() 用于合并图标与别名的数据。

合并逻辑 ​

在组合图标和别名时，属性无法直接合并。这是因为别名的变换是相对于父图标的变换而言的。

例如，若图标旋转 90 度，别名也旋转 90 度，则最终结果为旋转 180 度。水平翻转与垂直翻转同理。

用法 ​

该函数包含以下参数：

函数返回合并后的图标数据。

示例 ​

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\"/>"
}