Skip to content

mergeIconSets()

此函数属于 Iconify Tools 包

函数 mergeIconSets() 用于合并两个图标集,并创建一个新的 IconSet 实例。

为什么要合并图标集?

更新图标集时,旧图标通常会丢失。 如果有人正在使用一个已不存在或已重命名的旧图标,删除该图标将导致 UI 损坏。 这就是为什么永远不应该删除图标的原因。

合并新旧图标集可确保图标永远不会被删除。 合并过程会添加缺失的图标,但会将它们标记为隐藏, 因此它们不会显示在图标列表中,但可供使用旧图标的任何人调用。

此函数会尝试检测已重命名的图标,并为这些图标创建别名。

用法

该函数包含以下参数:

  • oldIconsIconSet。图标集的旧版本。
  • newIconsIconSet。图标集的新版本。

该函数不会修改作为参数传入的图标集,而是创建一个新的 IconSet 实例并将其返回。

示例

example.ts
tsimport { IconSet, mergeIconSets } from '@iconify/tools';

// Merge 2 icon sets
const merged = mergeIconSets(
   new IconSet({
       // Prefix, info, categories, characters are not copied from old icon set
       prefix: 'foo',
       icons: {
           'chrome-maximize': {
               body: '<g fill="currentColor"><path d="M3 3v10h10V3H3zm9 9H4V4h8v8z"/></g>',
           },
           'chrome-minimize': {
               body: '<g fill="currentColor"><path d="M14 8v1H3V8h11z"/></g>',
           },
       },
       width: 24,
       height: 24,
   }),
   new IconSet({
       prefix: 'bar',
       icons: {
           remove: {
               body: '<g fill="currentColor"><path d="M15 8H1V7h14v1z"/></g>',
           },
       },
   })
);

// Log merged icon set
console.log(merged.export());
Result:
json{
   "prefix": "bar",
   "icons": {
       "remove": {
           "body": "<g fill=\"currentColor\"><path d=\"M15 8H1V7h14v1z\"/></g>",
           "width": 16,
           "height": 16
       },
       "chrome-maximize": {
           "body": "<g fill=\"currentColor\"><path d=\"M3 3v10h10V3H3zm9 9H4V4h8v8z\"/></g>",
           "hidden": true
       },
       "chrome-minimize": {
           "body": "<g fill=\"currentColor\"><path d=\"M14 8v1H3V8h11z\"/></g>",
           "hidden": true
       }
   },
   "width": 24,
   "height": 24
}